vue中computed和watch

最新推荐文章于 2025-03-12 11:45:38 发布

原创最新推荐文章于 2025-03-12 11:45:38 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue.js中的计算属性(computed)和侦听器(watch)的功能及使用方法。计算属性用于根据已有数据生成新的计算结果，并支持缓存，仅在依赖数据变化时重新计算。侦听器则用于监听属性变化并执行相应操作，支持异步处理。

computed（计算属性）：

作用：能够避免数据冗余，通过计算，可以在已有的data数据中生成新的变量，计算属性的变量将会被缓存

触发时机：当依赖的响应式属性变化才会重新计算
示例：

<div id="app">{{fullName}}</div>

var vm = new Vue({
   el:'#app',
   data:{
     fristName:'zhang'
     lastName:'san'
  },
   computed:{
     // 仅读取
     fullName () {
      return this.fristName + ' ' + lastNmae
     },
     setName ：{
　　　　//读取和设置(getter、setter)
　　　　get () {
       　　return this.fristNmae + ' ' lastName
　　　　}
　　　　set (v) {
　　　　　　this.lastName = v + lastName
　　　　}　　
     }
  }
})

watch（侦听器）

作用：监听属性的变化

触发时机：当属性发生变化时触发（可以配合v-model等指令使用）

例：

     <h1>{{message}}</h1>
        <input type="text" v-model="message">
        <h1>{{person.name}}</h1>
        <input type="text" v-model="person.name">
  </div>

const app= new Vue({
            el : "#app",
            data : {
                message : "今天天气不错",
                person : {
                    name : "张三"
                }
            },

            watch : {
                // 参数1 : 修改后的数据
                // 参数2 : 修改前的数据
                message(nV, oV) {
                    // console.log(nV, oV);

                    console.log(this.message);
                },

                // person : {
                //     handler : function(nV, oV) {
                //         console.log(nV);
                //         console.log(oV);
                //     },
                //     deep : true
                // },

                "person.name"(nV, oV) {
                    console.log(nV);
                    console.log(oV);
                }
            }
        })

总结

计算属性

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法

侦听器

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
　　immediate：组件加载立即触发回调函数执行，
　　deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。