|
1. 计算属性定义 - 计算属性：要用的属性不存在，要通过已有属性计算得来，计算属性要有一个全新的配置项computed
- 对Vue来说，data里面的数据就是属性，只要Vue中的数据改变，就会重新解析模板，遇到插值语法里的方法会重新调用
原理 - 底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行？ - 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
优势 - 与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
备注 - 计算属性最终会出现在vm(Vue实例)上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
语法: 1.简写方式: computed: { "计算属性名" () { return "值" } }需求: 求2个数的和显示到页面上 <template> <div> <p>{{ num }}</p> </div></template><script>export default { data(){ return { a: 10, b: 20 } }, // 计算属性: // 场景: 一个变量的值, 需要用另外变量计算而得来 /* 语法: computed: { 计算属性名 () { return 值 } } */ // 注意: 计算属性和data属性都是变量-不能重名 // 注意2: 函数内变量变化, 会自动重新计算结果返回 computed: { num(){ return this.a + this.b } }}</script><style></style>
语法: 2.完整写法:
计算属性写成配置对象的格式:对象中用get和set函数 get的作用: 当有人读取fullName时，get就会被调用，且返回值就作为计算属性的值 (get一定要写return) get什么时候调用？ 1.初次读取fullName时。 2.所依赖的数据发生变化时。 get(){ console.log('get被调用了') // console.log(this) // 此处的this是vm(Vue实例) return this.firstName + '-' + this.lastName }, set:当计算属性的值被修改时被调用 形参接收的是传入的新值 ... computed:{ fullName:{ //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。 get(){ console.log('get被调用了') // console.log(this) //此处的this是vm return this.firstName + '-' + this.lastName }, //set什么时候调用? 当fullName被修改时。 set(value){ console.log('set',value) const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } }})
2. 监视（侦听）属性
<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 --><button @click="isHot = !isHot">切换天气</button>
1. 监视属性watch：当被监视的属性变化时, handler回调函数自动调用, 进行相关操作 监视的属性必须存在，才能进行监视！！ ... // 写法1. 传入watch配置 侦听ishot属性 watch:{ isHot:{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } }) // 写法2. 通过vm.$watch监视vm.$watch('isHot',{ immediate:true, //初始化时让handler调用一下，默认是false //handler什么时候调用？当isHot发生改变时。 handler(newValue,oldValue){ // 有两个参数，一个是新值，一个是旧值 console.log('isHot被修改了',newValue,oldValue) }})
2. 深度监视深度监视： - 1）Vue中的watch默认不监测对象内部值的改变（一层）。
- 2）配置deep:true可以监测对象内部值改变（多层）。
备注： - 1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
- 2）使用watch时根据数据的具体结构，决定是否采用深度监视。
data:{ isHot:true, numbers:{ a:1, b:1 }},watch:{ // 监视多级结构中某个属性的变化（原始写法是要加引号的，简写可以不加，但这种情况要加，否则报错） /* 'numbers.a':{ handler(){ console.log('a被改变了') } } */ //监视多级结构中所有属性的变化 numbers:{ deep:true, // 如果不开启这个，那监测的就是numbers的地址是否有变化 handler(){ console.log('numbers改变了') } }}监视属性-简写 当监视属性中只有handler()而不需要开启其他配置项时才能简写 watch:{ isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) }}/* vm.$watch('isHot',function (newValue,oldValue) { console.log('isHot被修改了',newValue,oldValue,this)}) */
3. 区别和原则computed和watch之间的区别 - computed能完成的功能，watch都可以完成。
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则 - 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
- 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
watch:{ firstName(val){ setTimeout(()=>{ console.log(this) //vue实例对象，若用普通函数则返回Window this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val }}
总结到此这篇关于Vue中计算属性和属性侦听的文章就介绍到这了,更多相关Vue计算属性和属性侦听内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JS中如何优雅的使用async await详解
vue中element-ui组件默认css样式修改的四种方式 |
