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读取ASP设定的COOKIE
Nov 24 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 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
2006/12/23 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
JS array 数组详解
2009/03/22 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
python实现在windows下操作word的方法
2015/04/28 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python变量作用范围实例分析
2015/07/07 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Python requests设置代理的方法步骤
2020/02/23 Python
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
会计专业自我评价
2014/02/12 职场文书
写得不错的求职信范文
2014/07/11 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python