computed：计算属性监听
为了监听data或者props的属性值，
写法类似于函数，但是他不是函数，是一个属性值，属性值名称可以自定义，
必须有返回值，他有自己的作用域（缓存），如果数据值不在变化或者与之前一样，
就不在执行执行体，而是从缓存中获取数据结果直接返回。
1.他不是函数，是一个属性值
2.必须有返回值（return）
3.他有自己的作用域（缓存）
4.而是从缓存中获取数据结果直接返回
5.多属性值的监听
computed: {
fullName：{
get(){//回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
return this.firstName + ' ' + this.lastName
},
set(val){//监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
//val就是fullName的最新属性值
const names = val.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
}
watch：属性监听
1.方法名不能随便定义，需要和监听的属性值的名称保持一致
2.不需要手动调用
3.他不是函数，是一个属性值
4.返回值可有可无，不是强制性（return）
5.没有缓存
6.单属性监听，不能多属性监听
handler(newVal) {}
immediate: true, // 开启默认调用（第一次直接调用执行）
deep: true // 就是开启深度监听的配置项
watch:{
secondChange:{
handler(oldVal,newVal){
console.log(oldVal)
console.log(newVal)
},
deep:true
}
},
watch和computed区别
1、功能上：computed是计算属性，
watch是监听一个值的变化，然后执行对应的回调。
2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，
那么调用当前的函数的时候会从缓存中读取，
而watch在每次监听的值发生变化的时候都会执行回调。
3、是否调用return：computed中的函数必须要用return返回，
watch中的函数不是必须要用return。
4、computed默认第一次加载的时候就开始监听；
watch默认第一次加载不做监听，如果需要第一次加载做监听，
添加immediate属性，设置为true（immediate:true）
5、使用场景：computed----当一个属性受多个属性影响的时候，
使用computed-----购物车商品结算。
watch–当一条数据影响多条数据的时候，使用watch-----搜索框.
原文链接：blog.csdn.net/weixin_4574…
watch中的函数是不需要调用的
computed内部的函数调用的时候不需要加()
(内部的不是函数，而是属性对象只有get方法时的简写，其实它是属性对象)
watch 属性监听 监听属性的变化
computed:计算属性通过属性计算而得来的属性
watch需要在数据变化时执行异步或开销较大的操作时使用
对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，
也要发生变化，这种情况下，我们最好使用计算属性computed。
computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。
主要当作属性来使用；
computed中的函数必须用return返回最终的结果
当computed中的函数所依赖的属性如果没有发生改变的时候，
那么调用当前函数的时候结果会从缓存中读取
watch 一个对象，键是需要观察的表达式，值是对应回调函数。
主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；
2、使用场景
computed
当一个属性受多个属性影响的时候就需要用到computed
最典型的例子： 购物车商品结算的时候
watch
当一条数据影响多条数据的时候就需要用watch
搜索数据
VUEX
1. state：vuex的基本数据，用来存储变量
2. getters：从基本数据(state)派生的数据，相当于state的计算属性
3. mutations：提交更新数据的方法，必须是同步的(如果需要异步使用action)。
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，
提交载荷作为第二个参数。
4. actions：和mutation的功能大致相同，不同之处在于
1. Action 提交的是 mutation，而不是直接变更状态
2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,
使得结构非常清晰，方便管理。
dispatch：异步操作，写法： this.$store.dispatch('actions方法名',值)
commit：同步操作，写法：this.$store.commit('mutations方法名',值)
vuex辅助函数
vue的传参方式
1.父传子:在对应子级组件上先绑定属性值，props接收父级组件传参的值
2.子传父：需要在对应的子级组件内的方法内this.$emit('key', value)；
需要在对应的父级组件上绑定自定义事件，事件名称就是emit发送的key
3.Bus.js (new Vue()) //
this.$emit('key', value)
this.$on('key',(res) => {})
this.$off('key')
4.Vuex
5.v-model/model
6.路由传参 this.$router.push({path: '', query: {}})，
this.$router.push({name: '', query: {}, params: {}})）
7.this.$refs (ref 需要绑定在组件上)
8.provide/inject（父子、爷孙）可以一直向下传递
9.this.$parent/this.$children（获取根节点this.$root）
vue生命周期
| 阶段 | 方法名 | 方法名 |
|---|---|---|
| 初始化 | beforeCreate | created |
| 挂载 | beforeMount | mounted |
| 更新 | beforeUpdate | updated |
| 销毁 | beforeDestroy | destroyed |
vue导航守卫
父子组件同步异步生命周期执行顺序
同步 import Page from '@/components/page'
父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted
异步 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/components/page'], page)
父组件的beforeCreate、created、beforeMount、mounted --> 子组件的beforeCreate、created、beforeMount、mounted
