码迷,mamicode.com
首页 > 其他好文 > 详细

计算属性computed和watch侦听器

时间:2020-02-17 16:05:14      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:渲染   ash   val   缓存机制   str   通过   解决   node   使用   

计算属性——缓存机制:仅当依赖的属性发生变化时,计算属性才会重新进行计算。get和set方法

方法实现计算属性:没有缓存机制,页面重新渲染就会调用方法。

watch侦听器——缓存机制:监听复杂数据类型(同源问题)——https://blog.csdn.net/weixin_43837268/article/details/96347840

computed计算属性和watch监听器的区别:https://segmentfault.com/a/1190000012948175?utm_source=tag-newest

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=
  , initial-scale=1.0">
  <title>Document</title>
  <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>age {{age}}</h1>
    <h1>计算属性{{fullName}}</h1>
    <h1>方法{{getFullName()}}</h1>
    <h1>watch{{watchFullName}}</h1>
    <h1>computed复杂数据{{arrName}}</h1>
    <h1>watch复杂数据{{watchArrName}}</h1>
  </div>
  <script>
    let vm=new Vue({
      el:‘#app‘,
      data:{
        firstName:‘Dell‘,
        lastName:‘Lee‘,
        age:23,
        watchFullName:‘Dell Lee‘,
        watchArrName:‘ssj‘,
        arr:[
          {name:‘ssj‘}
        ]
      },
      //计算属性  有缓存机制,仅当依赖的属性发生变化时才进行计算
      computed:{
        //data中不能定义fullName变量
        fullName:function(){
          console.log(‘计算属性调用‘);
          return this.firstName+‘ ‘+this.lastName;
        },
        arrName:function(){
          return ‘数组中第一个对象的名字是:‘+this.arr[0].name;
        },
        //解决watch数据同源问题
        arrJSON:function(){
          return JSON.parse(JSON.stringify(this.arr));
        }
      },
      //方法   无缓存机制,页面一旦重新渲染就会调用
      methods:{
        getFullName:function(){
          console.log(‘方法调用‘);
          return this.firstName+‘ ‘+this.lastName;
        }
      },
      //侦听器 有缓存机制,但是需要知道初始值
      watch:{
        firstName:function(){
          this.watchFullName=this.firstName+‘ ‘+this.lastName;
        },
        lastName:function(){
          this.watchFullName=this.firstName+‘ ‘+this.lastName;
        },
        arr:{
          deep:true,
          handler:function(newValue,oldValue){
            //这里old和new输出一致,是数据同源问题导致的,需要结合计算属性进行操作(通过JSON转换)
            console.log(oldValue[0].name);
            console.log(newValue[0].name);
            this.watchArrName=newValue[0][‘name‘];
          }
        },
        arrJSON:{ //配合computed使用
          deep:true,
          handler:function(newValue,oldValue){
            console.log(oldValue[0].name);
            console.log(newValue[0].name);
            this.watchArrName=newValue[0][‘name‘];
          }
        }
      }
    })
  </script>
</body>
</html>

 

计算属性computed和watch侦听器

标签:渲染   ash   val   缓存机制   str   通过   解决   node   使用   

原文地址:https://www.cnblogs.com/em2464/p/12321852.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!