Vue.js计算属性computed与watch(5)


Posted in Javascript onDecember 09, 2016

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用**计算属性**。

Vue实例的computed的属性

<div class="test">
    <p>原始的信息{{message}}</p>
    <p>计算后的信息{{ComputedMessage}}</p>
  </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      message:12
    },
    computed:{
      ComputedMessage:function () {
        return this.message+10;
      }
    }
  });

界面会显示 12 和 22
上述的方式是一种缓冲的实现的效果,这种实现的方式依赖于它的缓寸,计算得到的属性只有在相关依赖(message)改变的时候才会重新取值,这就意味着只要message没有发生改变的时候,多次访问ComputedMessage都不会再重新执行计算的这个属性。。

计算后的ComputedMessage属性始终是依赖于message的

通过调用函数实现同样的效果

<div class="test">
    <p>原始的信息{{message}}</p>
    <p>计算后的信息{{MessageFunction()}}</p>
  </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      message:12
    },
    methods:{
      MessageFunction:function () {
        return this.message+10;
      }
    }
  });

得到的结果和上面的结果是一样的,但是每次被重新渲染的时候都会被重新调用。
所以使用上述两种方式的时候,首先要确定你是否需要借助缓存

使用vue实例的watch

这个没有看懂呀
但是使用computed这个属性更加的方便和快捷

<div class="test">
    <p>原始的信息{{fullName}}</p>
  </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      firstName:"fur",
      lastName:"bool"
    },
    computed:{
      fullName:function () {
        return this.firstName+this.lastName
      }
    }
  });

而且你可以computed属性设置setter getter是默认就有的。

演示set和get的调用过程

<div class="test">
    <p>原始的信息{{fullName}}</p>
    <button @click="fu">test</button>
  </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      firstName:"fur",
      lastName:"bool",
      fullName:"sasas dsdsd dsds"
    },
    computed:{
      fullName:{
        get:function () {
          console.log("get")
          return this.firstName+this.lastName
        },
        set:function(value){
          var names=value.split(" ");
          this.firstName=names[0];
          this.lastName=names[names.length-1];
          console.log("set");
        }
      }
    },
    methods:{
      fu:function () {
        myVue.fullName="sasas dsdsd dsds";
        console.log(myVue.firstName);   //sasas
        console.log(myVue.lastName);  //dsds
      }
    }
  });

首先会输出get;

在点击按钮为fullName赋值的时候首先调用set 再调用get方法。

自定义的Watcher

虽然计算属性在大多数情况下是非常合适的,但是有的时候也需要自定义一个watcher。这是因为你想要在数据变化响应的时候,执行异步操作胡总和其他的操作是非常有用的。

Javascript 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
newxtree.js代码
Mar 13 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
javascript流程控制语句集合
Sep 18 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 #Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 #Javascript
vue.js绑定class和style样式(6)
Dec 09 #Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 #Javascript
JS定时器实现数值从0到10来回变化
Dec 09 #Javascript
原生js实现查询天气小应用
Dec 09 #Javascript
JS实现太极旋转思路分析
Dec 09 #Javascript
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python自动化报告的输出用例详解
2018/05/30 Python
python实现可逆简单的加密算法
2019/03/22 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
日语专业推荐信
2013/11/12 职场文书
中学自我评价
2014/01/31 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
2014年团支书工作总结
2014/11/14 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
敬老院义诊活动总结
2015/05/07 职场文书