1. computed计算属性

与Vue2中的computed配置功能一致。使用示例如下：

1. Student.vue

• 计算属性的简写只能进行读取；完整写法有get和set能进行读写
• 能读取姓和名，姓和名能构成全名
• 修改姓或名，全名也一起修改
• 修改全名，姓或名也一起修改

<template><div>姓：<input type="text" v-model="person.firstName"></div><div>名：<input type="text" v-model="person.lastName"></div><div>全名：<input type="text" v-model="person.fullName"></div>
</template><script>
import {reactive,computed} from 'vue'export default {name: 'Student',setup(){let person = reactive({firstName:'张',lastName:'三'})// 计算属性-简写：只能读取/* person.fullName = computed(()=>{return person.firstName + '-' + person.lastName}) */// 计算属性——完整写法: 可以读写person.fullName = computed({get(){return person.firstName + '-' + person.lastName},set(value){const arr = value.split('-')person.firstName = arr[0]person.lastName = arr[1]}})return {person}}
}
</script>

2. App.vue

<template><Student/>
</template><script>import Student from './components/Student'export default {name: 'App',components: {Student}}
</script>

3. 页面如下。给姓添加123，全名同步修改。给全名添加456，名同步修改
   

2. watch监视属性

与Vue2中watch配置功能一致

2.1 watch监视ref定义的数据

Student.vue

• 情况一：监视ref所定义的一个基础类型数据
  • immediate开启时初始化就会调用一下
  • 使用watch监视一个属性多次，监视回调函数就会调用多次
• 情况二：监视ref所定义的多个基础类型数据
• 情况三: 监视ref所定义的一个对象类型数据。对象内的属性发生改变不能监视到
  • 监视方式一: 使用person.value，这样监视的不是RefImpl，而是Proxy。这种也能深度监视
  • 监视方式二: 使用配置参数{deep:true}开启深度监视
  • 监视问题: 监视的oldValue和newValue一样

<template><h2>当前sum为：{{sum}}</h2><button @click="sum++">点我sum+1</button><hr><h2>当前的信息为：{{msg}}</h2><button @click="msg+='！'">修改信息</button><hr><h2>姓名：{{person.name}}</h2><h2>薪资：{{person.job.salary}}K</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.job.salary++">涨薪</button>
</template><script>import {ref,watch} from 'vue'export default {name: 'Student',setup(){let sum = ref(0)let msg = ref('你好啊')let person = ref({name:'张三',job:{salary:20}})// 情况一：监视ref所定义的一个基础类型数据。immediate开启时初始化就会调用一下// 使用watch监视一个属性多次，监视回调函数就会调用多次watch(sum,(newValue,oldValue)=>{console.log('sum变了',newValue,oldValue)},{immediate:true})// 情况二：监视ref所定义的多个基础类型数据watch([sum,msg],(newValue,oldValue)=>{console.log('sum或msg变了',newValue,oldValue)})// 情况三: 监视ref所定义的一个对象类型数据。对象内的属性发生改变不能监视到// 监视方式一: 使用person.value，这样监视的不是RefImpl，而是Proxy。这种也能深度监视// 监视方式二: 使用配置参数{deep:true}开启深度监视// 监视问题: 监视的oldValue和newValue一样watch(person.value,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})return {sum,msg,person}}
}
</script>

效果如下：

1. 初次访问页面，监视sum的immdiate为true生效
2. 点我sum+1，由于sum被监视了两次，所以监视回调函数调用两次
3. 点修改信息，能监视到
4. 点修改姓名，能监视到。但oldValue和newValue一样
5. 点涨薪，能深度监视到。但oldValue和newValue一样
   

2.2 watch监视reactive定义的数据

Student.vue

• 情况一：监视reactive所定义的一个响应式数据的全部属性
  • 注意1：获取的oldValue和newValue一样
  • 注意2：强制开启了深度监视，deep配置无效
• 情况二：监视reactive所定义的一个响应式数据中的某个属性
  • 注意1: 能正常获取到oldValue和newValue
• 情况三：监视reactive所定义的一个响应式数据中的多个属性。此时newValue和oldValue都是数组
• 情况四：监视reactive所定义的一个响应式数据中的某个深度对象类型属性
  • 注意1: 获取的oldValue和newValue一样
  • 注意2: 修改对象里面的内部属性，需要开启{deep:tree}才能监测到

<template><h2>姓名：{{person.name}}</h2><h2>姓名：{{person.age}}</h2><h2>薪资：{{person.job.salary}}K</h2><button @click="person.name+='~'">修改姓名</button><button @click="person.age+=1">修改年龄</button><button @click="person.job.salary++">涨薪</button>
</template><script>import {reactive,watch} from 'vue'export default {name: 'Student',setup(){let person = reactive({name:'张三',age:18,job:{salary:20}})// 情况一：监视reactive所定义的一个响应式数据的全部属性//    注意1：获取的oldValue和newValue一样//    注意2：强制开启了深度监视，deep配置无效/* watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)}) */// 情况二：监视reactive所定义的一个响应式数据中的某个属性//    注意1: 能正常获取到oldValue和newValuewatch(()=>person.name,(newValue,oldValue)=>{console.log('person的name变化了',newValue,oldValue)})// 情况三：监视reactive所定义的一个响应式数据中的多个属性。此时newValue和oldValue都是数组watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{console.log('person的name或age变化了',newValue,oldValue)})// 情况四：监视reactive所定义的一个响应式数据中的某个深度对象类型属性//    注意1: 获取的oldValue和newValue一样//    注意2: 修改对象里面的内部属性，需要开启{deep:tree}才能监测到watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)},{deep:true})return {person}}
}
</script>

效果如下：

1. 点修改姓名，能监视到。且监视两次所以监视回调函数执行两次。能正常获取到oldValue和newValue
2. 点涨薪，能深度监视到。但oldValue和newValue一样
   

3. watchEffect函数

• 不用指明监视哪个属性，监视的回调中用到哪个属性，这个属性改变就会自动执行监视回调函数
• watchEffect更注重的是回调函数的执行过程，所以不用写返回值

使用示例：

<template><h2>薪资：{{person.job.salary}}K</h2><button @click="person.job.salary++">涨薪</button>
</template><script>import {reactive,watchEffect} from 'vue'export default {name: 'Student',setup(){let person = reactive({job:{salary:20}})watchEffect(()=>{person.job.salaryconsole.log('watchEffect所指定的回调执行了')})return {person}}
}
</script>

效果如下。点击涨薪，person.job.salary发生变化，就会自动调用watchEffect的回调函数