1.计算属性
1.1 什么是计算属性
（1）Vue的原有属性：data对象当中的属性就可以理解为Vue的原有属性
（2）计算属性：使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性
1.2 计算属性的作用
（1）代码得到了复用
（2）代码更加便于维护
（3）代码的执行效率高了（可以走缓存）
1.3 vue2 计算属性怎么用？
（1）语法格式：vue对象中需要一个新的配置项computed
computed ：{ // 这是一个计算属性 计算属性1：{ // 当读取计算属性1的值的时候，getter方法被调用 get(){ }, // 当修改计算属性1的值的时候，setter方法被自动调用 set(val){ } } }
补充：get方法的调用时机包括两个
①第一个时机：第一次访问这个属性的时候
②第二个时机：该计算属性所关联的Vue原有属性的值发生变化时，get方法会被重新调用一次
③其他情况会走缓存
（2）代码示例：
<div id="app"> <h1>{{msg}}</h1> 输入的信息：<input type="text" v-model="info"><br> 反转的信息：{{reversedInfo}} <br> </div> <script> const vm =new Vue({ el: '#app', data :{ msg :'计算属性-反转字符串案例', info :'' }, computed :{ reversedInfo:{ get(){ console.log('getter 被调用了'); return this.info.split('').reverse().join('') }, set(val){ // val就是修改计算属性后的值 console.log('setter 被调用了'); } } } } ) </script>
（3）计算属性的简写形式(set方法一般不使用，如果只使用get方法可以使用简写形式)
computed : { reversedInfo(){ console.log('getter 被调用了'); return this.info.split('').reverse().join('') } }
1.4 vue3 的计算属性怎么用
import {computed} from ‘vue’ //computed 是一个组合式的 API。 setup(){ // 简写 let reversedName = computed(()=>{ // 这是一种简写形式，如果你只需要使用计算属性的get方法的话，可以这样简写 }) // 完整写法 let reversedName = computed({ get(){ // 读取计算属性的值的时候执行 }, set(value){ // 当修改计算属性的值的时候执行 } }) }
2.侦听器(watch)
（1）watch可以监视多个属性，监视哪个属性，就把这个属性的名字拿过来即可，可以监视vue的原有属性，也可以监视计算属性。被监视的数据需要具有响应式。
<body> <div id="app"> <h1>{{msg}}</h1> 数字：<input type="text" v-model="number"> </div> <script> const vm = new Vue({ el: '#app', data: { msg: '侦听属性的变化', number: 0 }, computed: { hehe() { return 'haha' + this.number; } }, watch: { number: { //初始化的时候，调用一次handler方法,默认是false // immediate:true, // 这里有一个固定的写法，方法名必须叫做：handler // 当被监视的属性发生变化的时候，handler就会自动调用一次 // handler方法上有两个参数： // 第一个参数newValue(属性值改变之后的新值),第二个参数是oldValue(属性值改变之后的旧值) handler(newValue, oldValue) { console.log(newValue, oldValue) } } , // 也可以监视计算属性 hehe: { handler(a, b) { console.log(a, b) } } } }) </script> </body>
（2）immediate：表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler
watch: { number: { immediate:true, handler(newValue, oldValue) { console.log(newValue, oldValue) } }
（3）如果监视的属性具有多级结构，一定要添加单引号：如：‘a.b’
<body> <div id="app"> 数字：<input type="text" v-model="a.b"> </div> <script> const vm = new Vue({ el: '#app', data: { a: { b: 0 } }, watch: { 'a.b': { handler(newValue, oldValue) { console.log(newValue, oldValue) } } } }) </script> </body>
（4）如果监视的属性具有多级结构，也可以开启深度监视，默认是关闭的
<body> <div id="app"> 数字：<input type="text" v-model="a.b"> </div> <script> const vm = new Vue({ el: '#app', data: { a: { b: 0 } }, watch: { a: { // 启用深度监视，默认是关闭的 deep: true, handler(newValue, oldValue) { console.log('@') } } } }) </script> </body>
3.computed和watch选择
（1）computed和watch如果都能完成某个功能，优先选择computed
（2）有一种情况下，必须使用watch。那就是程序中使用了异步的方式，只能使用watch
4.什么时候用箭头函数什么时候用普通函数
（1）该函数是Vue管理的，用普通函数
（2）不是Vue管理的，用箭头函数
