1.vue中的计算属性：
（1）提供了和data数据属性一样的属性，页面渲染调用数据时使用一样的语法规则（直接调用属性值，不需要再执行方法）
<body>
//调用data变量
<p>data-info:{{ info }}</p>
//调用computed变量
<p>computed-msg:{{ msg }}</p>
</body>
<srcipt>
createApp({
data() {
return {
info: "data属性info",
}
},
computed: {
// key 属性名，value是执行方法，但必须存在return提供属性返回值
msg: function () {
return "计算属性msg"
}
}
</script>
（2）但是又能兼顾vue方法属性中的逻辑操作(计算属性中的this指向vue的当前应用实例)
2.计算属性的特性：
（1）默认情况下计算属性构建的变量为只读变量，只能读取，不能修改；当通过页面来试图修改计算属性的变量值时，会打印 readonly 警告！
（2）通过对象取值的配置，可以实现计算属性的双向操作功能（即页面修改能修改计算属性变量，计算属性变量渲染到页面）
3.应该场景： （1）可以将页面的相关赋值逻辑操作定义在计算属性中，页面直接调用计算属性的返回值来达到控制逻辑的效果，简化页面模板语法的定义；
（2）计算属性具有缓存特性，可以通过缓存规则，减少多次调用属性时的逻辑操作方法的调用的次数，提升运行性能；
计算属性的缓存功能，在所依赖的变量没有发生变化时，计算属性不会触发重新计算，只有当计算属性所依赖的变量变化时，他才会再次触发计算属性；
（3）通过计算属性的双向操作功能（对象形式取值，通过get(),set()方法），可以将页面具有双向功能，但是逻辑不同的操作模拟成普通属性的双向功能；
2.监听：
数据侦听器：对某一变量的变化进行实时监听状态时，需要使用vue的侦听器
数据可以是data数据变量，也可以是计算属性中的变量；
1.基本数据类型监听，浅监听就可以解决；
2.引用数据类型监听，需要深度监听；
语法结构：
watch:{ 需要监听的变量：Function(newValue,oldValue){ 函数体 } }
watch:{ 需要监听的变量：{ handler: Function(newValue,oldValue){ 函数体 } } ,[options] }
<div id="app">
<!--
数据侦听器：
在vue中，对某一变量的变化实现监听它的状态时，侦听器可以实现；（数据可以是data数据，也可以是计算属性中的数据）
-->
<!-- 1.基本数据类型 -->
<p>msg:{{ msg }}</p>
<input type="text" v-model=" msg ">
<!-- 2.引用数据类型===数组 -->
<p>arr:{{ arr }}</p>
<input type="button" @click=" arr = ['张三','李四']" value="替换数组">
<input type="button" value="修改arr[0]" @click=" arr[0] = 88">
<!-- 3.引用数据类型====对象 -->
<pre>user:{{ user }}</pre>
<input type="text" v-model="user.name" placeholder="user.name">
<input type="text" v-model="user.age" placeholder="user.age">
</div>
<script type="module">
import { createApp } from '../assets/vue/3.0/vue.esm-browser.js'
createApp({
data(){
return {
msg:'测试数据',
arr:[1,2,3],
user:{
name:'tom',
age:18
}，
info:"info"
}
},
watch:{
/* watch是以对象的形式呈现，那么watch中的语法 key--value值
key==> 需要监听的变量名
value===> 取值为函数，当监听的数据发生变化时，函数被调用
函数有两个固定形参(newValue,oldValue),代表变化前的值和变化后的值
*/
// 1.默认浅监听
msg:function(nv,ov){
console.log('msg监听器触发',nv,ov);
},
arr:{
handler:function(nv,ov){
console.log('watch-arr监听器触发',nv,ov);
},
//deep配置项取值是Boolean值，默认为false，表示浅监听，true时表示深度监听，即可以监听引用数据类型的堆内存中的值的变化；
deep:true
},
user:{
handler:function(nv,ov){
console.log('watch-user监听器触发',nv,ov);
},
deep:true
},
//单独监听对象的具体项,使用 .key的方式来
"user.name":{
handler:function(nv,ov){
console.log('watch-user.name监听器触发',nv,ov);
},
deep:true
},
//默认监听是 在第一次加载的时候，不会触发监听器，只有在所监视的数据发生变化的时候，监听器才会被触发，immediate 默认值false ， 页面首次加载不会执行该监视方法
info:{
handler(nv,ov){
console.log("watch-info=变量发生变换",nv,ov);
},
immediate:true
}
}
}).mount("#app")
</script>
