vue计算属性和监听器实例解析


Posted in Javascript onMay 10, 2018

基本实例

<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: {
  // 计算属性的 getter
  reversedMessage: function () {
   // `this` 指向 vm 实例
   return this.message.split('').reverse().join('')
  }
 }
})

结果:

Original message: "Hello"
Computed reversed message: "olleH"

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数:

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

你可以打开浏览器的控制台,自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 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 侦听属性

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: {
  // getter
  get: function () {
   return this.firstName + ' ' + this.lastName
  },
  // setter
  set: 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 也会相应地被更新。

侦听器

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

例如:

<div id="watch-example">
 <p>
  Ask a yes/no question:
  <input v-model="question">
 </p>
 <p>{{ answer }}</p>
</div>
<!-- 因为 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.getAnswer()
  }
 },
 methods: {
  // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
  // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
  // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
  // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
  // 请参考:https://lodash.com/docs#debounce
  getAnswer: _.debounce(
   function () {
    if (this.question.indexOf('?') === -1) {
     this.answer = 'Questions usually contain a question mark. ;-)'
     return
    }
    this.answer = 'Thinking...'
    var vm = this
    axios.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
     })
   },
   // 这是我们为判定用户停止输入等待的毫秒数
   500
  )
 }
})
</script>

结果:

Ask a yes/no question:

I cannot give you an answer until you ask a question!

在这个示例中,使用 watch 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

除了 watch 选项之外,您还可以使用命令式的 vm.$watch API。

总结

以上所述是小编给大家介绍的vue计算属性和监听器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
js正则相关知识点专题
May 10 #Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 #Javascript
Javascript Promise用法详解
May 10 #Javascript
jQuery实现模糊查询的方法分析
May 10 #jQuery
async/await地狱该如何避免详解
May 10 #Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 #Javascript
JS中的JSON对象的定义和取值实现代码
May 09 #Javascript
You might like
php图片缩放实现方法
2014/02/20 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
酒店管理自荐信
2013/10/23 职场文书
材料物理专业求职信
2014/09/01 职场文书
迁户口计划生育证明
2014/10/19 职场文书
家长学校教学计划
2015/01/19 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
idea下配置tomcat避坑详解
2022/04/12 Servers