应用复杂度VS框架复杂度
渐进式框架
1、声明式渲染Declarative Rendering
2、组件系统Component System
3、客户端路由Client-Side Routing
4.大规模状态管理Large Scale State Management
5.构建工具Build System
Vue的两个核心
响应的数据绑定
当数据发生改变时，自动更新视图
利用Object.defineProperty中的getter/setter代理数据
视图组件
ui页面映射组件
组件可重用，可维护
虚拟DOM
提供一种方便的工具，使得开发效率得到保证
保证最小化的DOM操作，使得执行效率得到保证
用一个函数去实现用js对象的形式去表示嵌套的的Dom,targeName表示根节点，在通过prop表示里面都有哪些属性，再通过数组表示里面都有什么子节点。render函数通过document.creat创建标签并且把子节点插入到里面去，把属性添加到标签上面去。算法优化。
mvvm模式
m:model数据模型
v:view视图模板
vm:View-model 视图模型
vue实例
构造器：
在实例化vue时，需要传入一个选项对象，它可以包含数据、模板。挂载元素、方法、生命周期钩子等选项
vue的属性和方法：
每个vue实例都会代理其data对象
v-bind:data="msg"绑定属性
处理localStorage
save(key,value){
localStorage.setItem(key,JSON.stringfy(value))
},
get(key){
localStorage.getItem(key)
}
}
watch:普通监听和深层次监听
普通监听：
list:function(){}
}
深层次监听：浏览器刷新后改变的还存在
list:{
deep:true,
handler:function(){
}
}
}
监听哈希值得变化
window.addEventListener("hashchange",function(){
console.log(window.location.hash)
})
computed计算属性
computed:{
函数1
函数2
}
Vue.directive()
定义自己的组件
全局方式
template:"<div>我是一个组件</div>"
})
template: `<div>
<button @clivk="count++">{{count}}</button>
</div>`,
data: function() {
return {
count: 0
}
},
props: ["name"]//name是一个接口
})
局部组件：
el:"",
components:{
"first":{
template:`我是局部组件`
}
}
})
.父组件向子组件传值
在子组件中定义props然后增加属性,props然后创建一个名为message的属性
图片.png
图片.png
子组件向父组件传值
在子组件中在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
图片.png
vue路由传值的三种方式
vuex:
vuex是一个专为vue.js应用程序开发的状态管理模式；
采用集中式存储管理应用的所有组件的状态
并以相应的规则保证状态以一种可预测的方式发生变化
一、什么是vuex？
-
在Vue中，多组件的开发给我们带来了很多的方便，但同时将项目规模变大时候，多个组件之间的数据通信和状态管理就显得难以维护了。而Vuex就此应运而生。将状态管理单独掕出来，应用同统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单项数据流的方式管理数据。用户界面负责触发动作（action）进而改变对应状态（state），从而反映到视图上。
image
二、Vuex的组成部分
-
完整的应用Vuex开发的结构应该是这样的：
image
1. State
- State负责存储整个应用的状态数据，一般需要在使用的时候在根节点注入
store对象，后期就可以使用this.$store.state直接获取状态
//store为实例化生成的
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
这个store可以理解为一个容器，包含着应用中的state等。实例化生成store的过程是：
const mutations = {...};
const actions = {...};
const state = {...};
Vuex.Store({
state,
actions,
mutation
});
后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用this.$store.state获取，当然，也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去，如
//我是组件
import {mapState} from 'vuex'
export default {
computed: mapState({
count: state => state.count
})
}
2. Mutations
Mutations 的中文意思是变化，利用它可以更改状态 ，本质就是用来处理数据的函数，其接受唯一的参数值state。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是，定义的mutation必须是同步函数，否则devtool中的数据将可能出现问题，使状态改变变得难以追踪。
const mutations = {
mutationName(state) {
//在这里改变state中的数据
}
}
在组件中触发：
//我是一个组件
export default {
methods: {
handleClick() {
this.$store.commit('mutationName')
}
}
}
或者使用辅助函数mapMutations直接将触发函数反射到methods上，这样就能在元素事件绑定上直接使用了。如：
import {mapMutations} from 'vuex'
//我是一个组件
export default {
methods: mapMutations([
'mutationName'
])
}
3. Actions
Action也可以用于改变状态，不过是通过触发mutations实现的，重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似，也是绑定在组件的methods上的。如果选择直接触发的话，使用this.$store.dispatch(actionName)方法。
//定义Actions
const actions = {
actionName({ commit }) {
//dosomething
commit('mutationName')
}
}
在组件中使用
import {mapActions} from 'vuex'
//我是一个组件
export default {
methods: mapActions([
'actionName',
])
}
4. Getters
有些状态需要做二次处理，就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。
const getters = {
strLength: state => state.aString.length
}
//上面的代码根据aString状态派生出了一个strLength状态
在组件中使用
import {mapGetters} from 'vuex'
//我是一个组件
export default {
computed: mapGetters([
'strLength'
])
}
5. Plugin
插件就是一个钩子函数，在初始化store的时候引入即可。比较常用的是内置的logger插件，用于作为调试使用。
import createLogger from 'vuex/dist/logger'
const store = Vuex.Store({
...
plugins: [createLogger()]
})
vue 为什么组件的data要写成返回对象的函数
对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题
vue路由实现
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
网友评论