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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Javascript中的arguments对象
Jun 20 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
ES6 async、await的基本使用方法示例
Jun 06 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
原生JS进行前后端同构
2018/04/22 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
Python常用模块用法分析
2014/09/08 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
运动会稿件50字
2014/02/17 职场文书
物理力学求职信
2014/02/18 职场文书
cf搞笑广告词
2014/03/14 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
积极向上的团队口号
2014/06/06 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL