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 相关文章推荐
JS获取整个页面文档的实现代码
Dec 15 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
javascript call方法使用说明
2010/01/11 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
指导教师评语
2014/04/26 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
迟到检讨书
2015/01/26 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
Python获取百度热搜的完整代码
2021/04/07 Python
Python代码风格与编程习惯重要吗?
2021/06/03 Python
MySQL系列之四 SQL语法
2021/07/02 MySQL
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Win11快速关闭所有广告推荐
2022/04/19 数码科技