computed属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-1">
<p>初始字符串:{{ content }}</p>
<p>计算后字符串:{{ reversedContent }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
content: 'TanSea'
},
computed: {
reversedContent: function() {
return this.content.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Vue对象实例化时,之前接触过了el、data、methods,这里再介绍一个computed

computed的定义和methods的定义是一样的,但是在理解上可以理解为methods是类的方法,computed是类的属性

但是,computed默认是没有set方法的,我们可以显式的给他定义一个

<div id="app-2">
<p>初始字符串:{{ content }}</p>
<p>计算后字符串:{{ reversedContent }}</p>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el: '#app-2',
data: {
content: 'TanSea'
},
computed: {
reversedContent: {
get: function() {
return this.content.split('').reverse().join('')
},
set: function(newValue) {
this.content = newValue
}
}
}
})
</script>

这时,我们就可以在浏览器的控制台输入vm2.reversedContent = 'Hello, World'给他重新赋值了

在大部分情况下,computed和methods是可以互换的,那么他们的区别是什么?

computed 属性会基于它所依赖的数据进行缓存,只有在依赖的数据发生变化时,才会重新取值

methods总是再次执行函数

<div id="app-3">
<p>初始字符串:{{ nowDate }}</p>
<p>methods:{{ mNowDate() }}</p>
<!-- Date.now()是非响应式的依赖数据,computed属性永远不会更新 -->
<p>computed:{{ cNowDate }}</p>
</div>
<script type="text/javascript">
var vm3 = new Vue({
el: '#app-3',
data: {
nowDate: Date.now()
},
methods: {
mNowDate: function() {
return Date.now()
}
},
computed: {
cNowDate: function() {
return Date.now()
}
}
})
</script>

例子使用了Date.now()这种非响应式数据,computed在首次计算完成之后就不再更新

Vue.js学习笔记 第六篇 内置属性的更多相关文章

  1. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  2. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  3. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  4. Vue.js学习笔记 第四篇 列表渲染

    遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...

  5. Vue.js学习笔记 第五篇 事件处理

    监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. Vue.js学习笔记 第三篇 条件渲染

    条件选择 条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. Vue.js 学习笔记 一

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  8. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

随机推荐

  1. spark通过合理设置spark.default.parallelism参数提高执行效率

    spark中有partition的概念(和slice是同一个概念,在spark1.2中官网已经做出了说明),一般每个partition对应一个task.在我的测试过程中,如果没有设置spark.def ...

  2. 这样就可以修改MathType公式编号格式吗

    MathType公式编辑器与很多的软件都可以兼容,其中很多的用户在word上写论文的时候,都会用到MathType.特别是当公式比较多时,可以使用MathType公式编号功能来对公式进行自动编号.但公 ...

  3. 同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式

    1. 概念理解        在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式:   同步/异步主要针对C端: 同步:    ...

  4. Spring MVC的路径匹配

    Spring MVC中的路径匹配比起标准web.xml的servlet映射要灵活得多.路径匹配的默认策略是由org.springframework.util.AntPathMatcher实现的.顾名思 ...

  5. 基于Boost无锁队列实现的内存池

  6. CodeIgniter框架——源码分析之入口文件index.php

    CodeIgniter框架的入口文件主要是配置开发环境,定义目录常量,加载CI的核心类core/CodeIgniter.php.   在index.php中,CI首先做的事情就是设置PHP的错误报告, ...

  7. [Docker]学习笔记--搭建gitlab

    Gitlab 是一个用于仓库管理系统的开源项目.使用Git作为代码管理工具,并在此基础上搭建起来的web服务. 详细介绍可以参照官网,https://about.gitlab.com/ 今天主要是通过 ...

  8. 【BZOJ3995】[SDOI2015]道路修建 线段树区间合并

    [BZOJ3995][SDOI2015]道路修建 Description  某国有2N个城市,这2N个城市构成了一个2行N列的方格网.现在该国政府有一个旅游发展计划,这个计划需要选定L.R两列(L&l ...

  9. 《从零开始学Swift》学习笔记(Day 33)——属性观察者

    原创文章,欢迎转载.转载请注明:关东升的博客 为了监听属性的变化,Swift提供了属性观察者.属性观察者能够监听存储属性的变化,即便变化前后的值相同,它们也能监听到. 属性观察者主要有以下两个: l ...

  10. Objective-c 单例模式

    用GCD写Objective-c的单例模式和C#有比较大的区别 声明h文件 #import <Foundation/Foundation.h> @interface me : NSObje ...