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 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php进程间通讯实例分析
2016/07/11 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP crc32()函数讲解
2019/02/14 PHP
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Django接收自定义http header过程详解
2019/08/23 Python
Python目录和文件处理总结详解
2019/09/02 Python
python自动生成model文件过程详解
2019/11/02 Python
python中def是做什么的
2020/06/10 Python
opencv 阈值分割的具体使用
2020/07/08 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
小学生手册家长评语
2014/04/16 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
党的生日演讲稿
2014/09/10 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
个人查摆剖析材料
2014/10/04 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android