Vue计算属性(computed)和侦听器(watch)
Vue计算属性(computed)和侦听器(watch)
计算属性(computed)
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以不推荐在“{{ … }}”中放入太多逻辑
<div id="example">{{ message.split('').reverse().join('') }}
</div>
在这个表达式中模板不再是简单的声明式逻辑。对于任何复杂逻辑,应当使用计算属性
什么是计算机属性?
计算机属性可以像绑定普通property一样在模板中绑定计算属性,特点:可以用于复杂逻辑处理
<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>var vm = new Vue({el: '#example',data: {message: 'Hello'},computed: {// 计算属性的getterreversedMessage: function () {// `this` 指向vm实例return this.message.split('').reverse().join('')}}
})
结果:
Original message: "Hello"
Computed reversed message: "olleH"
这里声明了一个计算属性reversedMessage。提供的函数将用作property vm.reversedMessage的getter函数
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
可以打开浏览器的控制台,修改例子中的vm。vm.reversedMessage的值始终取决于vm.message的值。而vm.reversedMessage依赖于 vm.message,因此当vm.message发生改变时,所有依赖vm.reversedMessage的绑定也会更新。而且最妙的是已经以声明的方式创建了这种依赖关系:计算属性的getter函数是没有副作用(side effect)的,这使它更易于测试和理解
计算属性缓存 vs 方法
在表达式中调用方法来达到同样的效果:
<p>Reversed message: "{{ reversedMessage() }}"</p>// 在组件中
methods: {reversedMessage: function () {return this.message.split('').reverse().join('')}
}
可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于响应式依赖进行缓存的。只在相关响应式依赖发生改变时计算机属性才会重新求值。这就意味着只要message还没有发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数
这也同样意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖:
computed: {now: function () {return Date.now()}
}
相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。
计算机属性 | 方法 |
---|---|
只有在相关响应式依赖发生改变时计算机属性才会重新求值 | 每次调用重新执行 |
为什么需要缓存?
假设有一个性能开销比较大的计算属性A,它需要遍历一个巨大的数组并做大量的计算。然后可能有其他的计算属性依赖于A。如果没有缓存,将不可避免的多次执行A的 getter!如果不希望有缓存,请用方法来替代
计算属性 vs 侦听属性(watch)
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性。当有一些数据需要随着其它数据变动而变动时,很容易滥用watch——特别是如果之前使用过AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的watch回调
<div id="demo">{{ fullName }}</div>var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}
})
上面代码是命令式且重复的。使用下面计算属性就简单多了
var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}
})
计算属性的setter
计算属性默认只有getter,不过在需要时也可以提供一个setter:
//...
computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}
}
// ...
现在再运行vm.fullName = 'John Doe’时,setter会被调用,vm.firstName和vm.lastName也会相应地被更新
侦听器(watch)
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
watch特点:最初绑定的时候是不会执行的,要等到监听属性发生改变时才执行监听事件
<div id="watch-example"><p>Ask a yes/no question:<input v-model="question"></p><p>{{ answer }}</p>
</div>
在下面示例中,使用watch选项允许执行异步操作(访问一个API),限制执行该操作的频率、并在得到最终结果前,设置中间状态。这些都是计算属性无法做到的。除了watch选项之外,还可以使用命令式的vm.$watch
<!-- 因为AJAX库和通用工具的生态已经相当丰富,Vue核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script><script>var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {// 如果 `question` 发生改变,这个函数就会运行question: function (newQuestion, oldQuestion) {this.answer = 'Waiting for you to stop typing...'this.debouncedGetAnswer()}},created: function () {// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,// 请参考:https://lodash.com/docs#debouncethis.debouncedGetAnswer = _.debounce(this.getAnswer, 500)},methods: {getAnswer: function () {if (this.question.indexOf('?') === -1) {this.answer = 'Questions usually contain a question mark. ;-)'return}this.answer = 'Thinking...'var vm = thisaxios.get('https://yesno.wtf/api').then(function (response) {vm.answer = _.capitalize(response.data.answer)}).catch(function (error) {vm.answer = 'Error! Could not reach the API. ' + error})}}})
</script>
上一篇:Vue实例 下一篇:Vue环境搭建(Node)
Vue计算属性(computed)和侦听器(watch)相关推荐
- 【15】Vue:02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性 表单基本操作 表单修饰符 自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令 带参数 自定义指令局部指令 计算属性 c ...
- vue计算属性computed和侦听属性watch的用法和区别
计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用.注意:计算属性里面必须要ruturn,否则无法拿到结果.计算属性 ...
- 面试点:五句话教你计算属性和和侦听器区别
在面试官问你计算属性和侦听器有什么区别时,他想听到的核心就是下面这五句话 (0)功能不同,计算属性用于解决模板语法冗余问题,侦听器侦听data中每一个数据变化 (1)计算属性有缓存机制,侦听器没有缓存 ...
- vue计算属性computed与监听属性watch的基本使用
目录 Vue.js 计算属性 Vue.js 监听属性 Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 反转字符串的示例 <!DOCTYPE ...
- 【前端——vue】:过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
- Vue属性篇_侦听器watch
作用:侦听属性,响应数据(data&computed)的变化,当数据变化时,会立即执行对应函数,其属性值可以为函数.字符串.对象和数组. 1.属性值类型 (1)函数类型 函数类型中,被侦听的数 ...
- Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义 通过已有属性计算生成一个新的组合属性. 原理 底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质 计算属性的 ...
- Vue 计算属性 computed
<!--计算属性:1. 定义:要用的属性不存在,要通过已有的属性计算得来2. 原理:底层借助了 Object.defineProperty 方法提供的 getter 和 setter3. get ...
- Vue计算属性- computed:{}
七. Vue计算属性 计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行 ...
- 4.vue基础(三)计算属性-监视(侦听)属性
文章目录 1. 计算属性 1.1 插值语法实现姓名案例 1.2 methods实现 1.3 计算属性实现 2.监视(侦听)属性 2.1 天气案例 2.2 利用监听属性 2.3 深度监听 2.3.1 监 ...
最新文章
- mysql字符集和表字符集_设置数据库的字符集和设置表字段字符集的区别是什么?...
- 网络攻击与防御技术第三次实验
- mongoDB简明教程-python
- 游戏中用到的设计模式
- ★☆★ lc 847. Shortest Path Visiting All Nodes
- centos7.4下安装配置PHP服务(源码安装)并配置nginx支持php
- 有人说苹果手机的CPU非常强大,为什么会这样?苹果cpu又是谁设计的?
- 使用RMAN对数据文件进行恢复
- 关于写程序时「对数据库操作」的一些总结。
- 卸载vuecli3_112、vue-cli3安装遇到的问题,卸载不掉旧版本,导致更新不了
- 提取关键字 结巴分词_结巴分词5--关键词抽取
- linux权限777什么意思,chmod 权限777是什么意思
- 【LDO稳压器】SOT23-5封装-RT9193-RT9013-LP2992-LP5907设计
- 【蓝牙sbc协议】sbc源码阅读笔记(二)——sbc_struct详解(上)
- VS如何导入已有项目文件夹
- arcgis api for javascript 的swipe的使用
- 【微软内推】微软2023届校园招聘开始啦
- TALIB 中文文档 Volume Indicators 成交量指标
- Deferred Decal(延迟贴花)
- 任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现