前言


一般地,当模板内容比较简单的时候,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项。

data

data是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data属性能够响应数据变化。

【注意】不应该对data属性使用箭头函数。

  1. <div id="app">
  2. {{message}}
  3. </div>
  1. <script>
  2. var values = {message:'hello Vue'}
  3. var vm = new Vue({
  4. el:'#app',
  5. data:values
  6. })
  7. console.log(vm)
  8. </script>

Vue实例创建之后,可以通过vm.$data访问原始数据对象。

  1. console.log(vm.$data)

Vue实例也代理了data对象上所有的属性。

  1. <script>
  2. var values = {message: 'Hello Vue!'}
  3. var vm = new Vue({
  4. el: '#app',
  5. data: values
  6. })
  7. console.log(vm.$data === values);//true
  8. console.log(vm.message);//'Hello Vue!'
  9. console.log(vm.$data.message);//'Hello Vue!'
  10. </script>

被代理的属性是响应的,也就是说值的任何改变都是触发视图的重新渲染,设置属性也会影响到原始数据,反之亦然。

但是,以_或者$开头的属性不会被Vue实例代理,因为它们可能和Vue内置的属性或方法冲突了,可以使用例如vm.$data._property的方式访问这些属性。

  1. <script>
  2. var values = {
  3. message: 'Hello Vue!',
  4. _name: '小火柴'
  5. }
  6. var vm = new Vue({
  7. el: '#app',
  8. data: values
  9. })
  10. console.log(vm._name);//undefined
  11. console.log(vm.$data._name);//'小火柴'
  12. </script>

computed

计算属性函数computed将被混入到Vue实例中,所有getter和setter的this上下文自动地绑定为Vue实例。

【注意】不应该使用箭头函数来定义计算属性函数。

下面是关于computed的一个例子。

  1. <div id="example">
  2. <p>原始字符串: "{{ message }}"</p>
  3. <p>反向字符串: "{{ reversedMessage }}"</p>
  4. </div>
  1. <script>
  2. var vm = new Vue({
  3. el: '#example',
  4. data: {
  5. message: '小火柴'
  6. },
  7. computed: {
  8. reversedMessage: function () {
  9. return this.message.split('').reverse().join('')
  10. }
  11. }
  12. })
  13. </script>

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

  1. console.log(vm.reversedMessage) // -> '柴火小'
  2. vm.message = 'Goodbye'
  3. console.log(vm.reversedMessage) // -> 'eybdooG'

vm.reversedMessage的值始终取决于vm.message的值,可以像绑定普通属性一样在模板中绑定计算属性,当vm.message发生改变时,所有依赖于vm.reversedMessage的绑定也会更新。vm.reversedMessage依赖于vm.message的值,vm.reversedMessage本身并不能被赋值。

【setter】

计算属性默认只有getter,不过在需要的时候也可以提供一个setter。

  1. <script>
  2. var vm = new Vue({
  3. data: { a: 1 },
  4. computed: {
  5. // 仅读取,值只须为函数
  6. aDouble: function () {
  7. return this.a * 2
  8. },
  9. // 读取和设置
  10. aPlus: {
  11. get: function () {
  12. return this.a + 1
  13. },
  14. set: function (v) {
  15. this.a = v - 1
  16. }
  17. }
  18. }
  19. })
  20. console.log(vm.aPlus);//2
  21. vm.aPlus = 3
  22. console.log(vm.a);//2
  23. console.log(vm.aDouble);//4
  24. </script>

methods

通过调用表达式中的methods也可以达到同样的效果。

【注意】不应该使用箭头函数来定义methods函数。

  1. <div id="example">
  2. <p>原始字符串: "{{ message }}"</p>
  3. <p>反向字符串: "{{ reversedMessage() }}"</p>
  4. </div>
  1. <script>
  2. var vm = new Vue({
  3. el: '#example',
  4. data: {
  5. message: '小火柴'
  6. },
  7. methods: {
  8. reversedMessage: function () {
  9. return this.message.split('').reverse().join('')
  10. }
  11. }
  12. })
  13. </script>

【缓存】

对于最终的结果,两种方式确实是相同的。然而不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值,这就意味着只要message还没有改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必执行函数。相比而言,只要发生重新渲染,method调用总会执行该函数。

假设有一个性能开销比较大的计算属性A,它需要遍历一个极大的数组和做大量的运算,可能有其他的计算属性依赖于A。如果没有缓存,将不可避免的多次执行A的getter!如果不希望有缓存,则用method替代。

watch

Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动:watch属性。watch属性是一个对象,键是需要观察的表达式,值是对应的回调函数,回调函数得到的参数为新值和旧值。值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性。

【注意】不应该使用箭头函数来定义watch函数。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <button @click="a++">a加1</button>
  11. <h5>{{message}}</h5>
  12. </div>
  13.  
  14. <script>
  15. var vm = new Vue({
  16. el: '#app',
  17. data: {
  18. a: 1,
  19. message: ''
  20. },
  21. watch: {
  22. a: function(newval, oldval) {
  23. this.message = `a的旧值为:${oldval},a的新值为:${newval}`;
  24. }
  25. }
  26. })
  27. </script>
  28. </body>
  29. </html>

【$watch】

除了使用数据选项中的watch方法以外,还可以使用实例对象的$watch方法,该方法的返回值是一个取消观察的函数,用来停止触发回调。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <button @click="a++">a加1</button>
  11. <h5>{{message}}</h5>
  12. </div>
  13.  
  14. <script>
  15. var vm = new Vue({
  16. el: '#app',
  17. data: {
  18. a: 1,
  19. message: ''
  20. }
  21. })
  22. var unwatch = vm.$watch('a', function(newval, oldval) {
  23. if(newval === 10) {
  24. unwatch();
  25. }
  26. this.message = `a的旧值为:${oldval},a的新值为:${newval}`;
  27. })
  28. </script>
  29. </body>
  30. </html>

上面的代码中,当a的值更新到10的时候,触发unwatch()来取消观察。点击按钮时,a的值仍然会变化,但是不再触发watch的回调函数。

Vue实例对象的数据选项(火柴)的更多相关文章

  1. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  2. vue单文件组件data选项的函数体获取vue实例对象

    因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...

  3. 2-3 Vue实例中的数据,事件和方法

    上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html ...

  4. Vue学习之vue实例中的数据、事件和方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  6. Vue组件的基础用法(火柴)

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

  7. vue学习笔记(四)——Vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

  8. Vue(十二)vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...

  9. vue实例详解

    Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...

随机推荐

  1. 分享一个电子发票信息提取工具(Python)

    电子发票太多,想统计下总额异常困难,网上工具不好用,花了2个小时实现一份,测试过中石油.京东开具的电子发票还行,部分发票名称失败有问题不影响统计,有需要的小伙伴自己拿去改吧. import cmd i ...

  2. [转] Scala 的集合类型与数组操作

    [From] https://blog.csdn.net/gongxifacai_believe/article/details/81916659 版权声明:本文为博主原创文章,转载请注明出处. ht ...

  3. OpenERP how to set the tree view limit

    return { 'name':u'库存报表', 'view_type':'form', 'view_mode':'tree,form', 'res_model':'rainsoft.account. ...

  4. 高性能web服务器(热死你)Resin Linux的安装、配置、部署,性能远超Nginx支持Java、PHP等

    高性能web服务器(热死你)Resin Linux的安装.配置.部署,性能远超Nginx支持Java.PHP等 一.    安装resin 1.  下载resin: 下载地址:http://cauch ...

  5. (转)aix非计算内存 占用过高 案例一则

    原文:http://www.talkwithtrend.com/Article/28621 两台小型机组成的RAC环境,在用topas查看资源使用情况时,发现一台机器的非计算内存占用过高: MEMOR ...

  6. Git学习系列之Git基本操作拉取项目(图文详解)

    前面博客 Git学习系列之Git基本操作推送项目(图文详解) 当然,如果多人协作,或者多个客户端进行修改,那么我们还要拉取(Pull ... )别人推送到在线仓库的内容下来. 大神们是不推荐使用 pu ...

  7. ServiceLoader解读

    SPI的全名为Service Provider Interface.普通开发人员可能不熟悉,因为这个是针对厂商或者插件的.在java.util.ServiceLoader的文档里有比较详细的介绍. 简 ...

  8. Velocity工作原理解析和优化

    在MVC开发模式下,View离不开模板引擎,在Java语言中模板引擎使用得最多是JSP.Velocity和FreeMarker,在MVC编程开发模式中,必不可少的一个部分是V的部分.V负责前端的页面展 ...

  9. HDU 6225 Little Boxes

    Little Boxes Little boxes on the hillside.  Little boxes made of ticky-tacky.  Little boxes.  Little ...

  10. JDK1.7新特性(2):异常和可变长参数处理

    异常 jdk1.7对try--catch--finally的异常处理模式进行了增强,下面我们依次来看增强的方面. 1. 为了防止异常覆盖,给Throwable类增加了addSuppressed方法,可 ...