vue的计算属性和侦听器（computed&&watch）

最新推荐文章于 2022-04-27 00:54:17 发布

艺术就是派大星220

最新推荐文章于 2022-04-27 00:54:17 发布

阅读量118

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Rossbort/article/details/120304299

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

计算属性computed

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">

{{ message.split('').reverse().join('') }}

</div>

所以，对于任何复杂逻辑，你都应当使用计算属性

代码案例：

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <input type="text" v-model='name'>
        <input type="text" v-model='age'>
        <h1>{{name}} 是 {{age >=18 ? "成年人" : "未成年人"}}</h1>
        <h1>{{age|myshow(1,2,3,name)}}</h1>
        // 以上两种模板会使你的模板繁杂，难以维护，那么就可以使用计算属性，把代码放在js中
        <h2>{{personType}}</h2>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    Vue.filter('myshow',function (val,a,b,c,d) {
      // val 对应的是age的值
      // a - 1; b - 2; c - 3; d - name;
      console.log(arguments)
      return d +' 是 ' + (val >= 18 ? "成年人" : '未成年人')
    })
    let vm = new Vue({
        el:'#app',
        data:{
            name:"小明",
            age:0
        },
        computed: {
          personType(){
            1.除了过滤器 中的this不是当前实例 其他的你见到的函数中的this都是当前实例；
            2.函数中的this 就是当前实例
            3.计算属性的特点 就是 只要依赖不发生改变，这个函数就不会执行；
               依赖 ===》 就是你在这个函数中使用的 this上的属性,必须是同步使用，异步属性更改，函数并不会执行
            // setTimeout(() => {
            //   console.log(this.name)
            // }, 10);
            4.computed中的属性最终也是被挂在到了当前的实例上了，给的值不是函数体 而是函数的返回结果
            5.data  methods computed 这里边的属性 都会被挂在到实例上 （props）

            console.log(this.name)
            return this.age >= 18 ? "成年人" : '未成年人'
          }
        },
    });
</script>

计算属性 vs 方法

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖（this指定的属性）进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着在上面的案例中只要 name还没有发生改变，多次访问 personType计算属性会立即返回之前的计算结果，而不必再次执行函数。

监听属性watch

当你有一些数据需要随着其它数据变动而变动时，就可以使用watch

代码案例：

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <input type="text" v-model='firstName'>
        <input type="text" v-model='middleName'>
        <input type="text" v-model='lastName'>
        <h2>这个人的全名是{{fullName}}</h2>
        <h2>这个人的全名是{{fullName2}}</h2>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            name:"小明",
            firstName:'',
            middleName:'',
            lastName:'',
            fullName2:'',
            obj:{
                a:123        
            }
        },
        computed: {
          fullName(){
            return this.firstName + '-' + this.middleName + '-'+this.lastName
          },
          // name(){
          //   return this.firstName
          // }
        },
        watch: {
           这里边放的都是已经存在的属性名
           就是 监听这个属性的变化 ，这要属性发生改变 这里边对应的函数就会执行
           watch 可以编写异步操作；异步数据更改也会使函数执行
          firstName(newV,oldV){
            console.log(arguments);
            setTimeout(() => {
              this.fullName2 = newV + '-' + this.middleName + '-'+this.lastName
            }, 1000);
          },
          middleName(newV){
            this.fullName2 = this.firstName + '-' + newV + '-'+this.lastName
          },
          lastName(newV){
            this.fullName2 = this.firstName + '-' + this.middleName + '-'+newV
          },
          fullName(){
            console.log(666)
          },
          obj: {    
            监听一个对象时，对象里的内容更改，并不会出发监听事件，
                只有obj这个变量对应的值改变的时候 才会触发这个函数，
                    而deep可以解决这个问题，设置为true时，就可以监听对象里的属性变化
               deep:true,//深度监听
               immediate:true,// 刚进来时 先执行一次handler回调函数，就是说数据还没有变化之前先执行一次监听的方法
               handler(newV,oldV){
            深度监听一个对象的时候 这两个形参对应的都是新值；
              console.log(newV,oldV)
            }
          }
            

          }
        },
    });
</script>

艺术就是派大星220

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的计算属性和侦听器（computed&&watch）

计算属性computed模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example">{{ message.split('').reverse().join('') }}</div>所以，对于任何复杂逻辑，你都应当使用计算属性代码案例：<body> <div id="app"> <h1>{...
复制链接

扫一扫