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 拖动表格行实现代码
May 05 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 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
php使用codebase生成随机数
2014/03/25 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python的socket编程入门
2018/01/29 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
Django中FilePathField字段的用法
2020/05/21 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
监督检查工作方案
2014/05/28 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
家长意见书
2015/06/04 职场文书
听课评课活动心得体会
2016/01/15 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python