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字符串转成JSON
Nov 07 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
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
解决File size limit exceeded 错误的方法
2013/06/14 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP精确计算功能示例
2016/11/29 PHP
Jquery遍历节点的方法小集
2014/01/22 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python单例模式实例详解
2017/03/01 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
护理职业生涯规划书
2014/01/24 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
物流管理专业求职信
2014/05/29 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
HTML常用标签超详细整理
2022/03/19 HTML / CSS