1、computed和watcher的区别
computed：计算属性
- 支持缓存，只有依赖的数据发生变化，才会重新计算
- 不支持异步，当computed中有异步操作时，无法监听数据的变化
- computed默认会从缓存中读取数据，计算属性是基于响应式数据来缓存的，也就是计算data声明过的，或者props中传入的数据
- 当一个属性受多个属性影响的时候，使用computed
- 必须return
- 默认第一次加载的时候就开始监听
watch：监听属性
- 不支持缓存
- 支持异步
- 监听的数据必须是data声明的数据或者props传入的数据
- 当一个值的改变影响多个值的时候，使用watch
- 不是必须return的
- 默认第一次加载不监听，如果需要监听，要加immediate
- 设置了deep才可以深度监听嵌套对象的数据变化
总结
当一个值的结果依赖其他值的结果时，选择使用computed，在下一次获取computed值时才会重新计算
watcher更多的是观察性质，不缓存，数据变化时就调用监听的回调函数
2、computed和methods的区别
1.computed以对象属性的方式进行调用，methods必须以括号的形式调用
// computed调用
{{msg}}
// methods调用
{{msg()}}
2.computed有缓存属性，如果需要使用多次，那么只会调用一次，methods是每次使用都要进行调用
思考💡
为什么computed是以对象属性的方式调用？
计算属性的实质是对象，其中定义了get和set方法
computed: {
name: {
get: function () {
return this.firstName + this.lastName;
},
set() {
}
}
},
但是一般的操作中，我们只需要get方法，不需要使用set方法，所以计算属性一般是只读属性；去掉无用的set方法之后，computed属性简写为我们常见的方式：
computed: {
name: function () {
return this.firstName + this.lastName;
}
},
3、filter 与 computed 的区别
1.过滤器概念
vue的过滤器是通过过滤操作来过滤数据，是不会改变数据的，通过过滤数据来改变用户看到的结果 计算属性和methods是通过修改数据来改变用户看到的结果的
2.过滤器使用
一般用在{{}}和v-bind中，然后放在|操作符之后进行操作
<li>商品价格：{{item.price | filterPrice}}</li>
filters: {
filterPrice (price) {
return price ? ('￥' + price) : '--'
}
}
4、watch的几种用法
方法一：直接写一个监听处理函数
每次监听到属性值（如cityName）改变时，执行此函数
<input type="text" v-model="cityName"/>
watch: {
cityName(newVal, oldVal){
this.cityName = newVal
}
}
方法二：监听方法名
方法名在 methods 中定义
export default{
data () {
return {
cityName: '上海'
}
},
watch: {
cityName: 'nameChange'
},
methods: {
nameChange(newVal, oldVal){
this.cityName = newVal
}
}
}
方法三：使用 immediate（立即）和 deep 属性及 handler （处理者）方法
watch特点
当值第一次绑定时不会执行监听函数，只有值发生改变时才会执行监听函数
如果需要第一次绑定时执行监听函数，使用 immediate 属性
immediate属性
监听属性后面写成对象形式，包含 handler 方法和 immediate 属性
immediate 属性表示 watch 首次绑定时，是否执行 handler 方法
immediate 为 true 表示 watch 声明的时候，立即执行 handler 方法
immediate 值为 false 则和一般 watch 用法一样，在数据发生变化时才执行handler 方法
export default{
watch: {
cityName: {
handler(newVal, oldVal){
this.cityName = newVal
},
immediate: true
}
}
deep深度监听
当需要监听一个对象改变时，普通 watch 无法监听到对象内部属性变化
watch 中使用 deep 属性，可以对对象中的属性进行深度监听
<input type="text" v-model="cityName.name"/>
export default{
data () {
return {
cityName: {id: 1, name: '上海'}
}
},
watch: {
cityName: {
handler(newVal, oldVal){
console.log('newVal', newVal)
console.log('oldVal', oldVal)
},
immediate: true,
deep: true,
}
}
}
设置 deep: true 可以监听到cityName.name 变化
此时会给 cityName 所有属性都加上这个监听器
当对象属性较多时，每个属性值变化都会执行 handler 方法
监听对象属性名
如果只需要监听对象中的一个属性值，使用字符串形式监听对象属性名
export default{
data () {
return {
cityName: {id: 1, name: '上海'}
}
},
watch: {
'cityName.name': {
handler(newVal, oldVal){
console.log('newVal', newVal)
console.log('oldVal', oldVal)
},
immediate: true,
deep: true,
}
}
}
注意
数组（一维、多维）变化不需要通过深度监听
对象数组中对象属性变化需要进行深度监听
watch中不要使用箭头函数，因为箭头函数中的 this 是指向当前作用域
参考👀
