Vue实例对象的数据选项(火柴)
前言
一般地,当模板内容比较简单的时候,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项。
data
data是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data属性能够响应数据变化。
【注意】不应该对data属性使用箭头函数。
- <div id="app">
- {{message}}
- </div>
- <script>
- var values = {message:'hello Vue'}
- var vm = new Vue({
- el:'#app',
- data:values
- })
- console.log(vm)
- </script>
Vue实例创建之后,可以通过vm.$data访问原始数据对象。
- console.log(vm.$data)
Vue实例也代理了data对象上所有的属性。
- <script>
- var values = {message: 'Hello Vue!'}
- var vm = new Vue({
- el: '#app',
- data: values
- })
- console.log(vm.$data === values);//true
- console.log(vm.message);//'Hello Vue!'
- console.log(vm.$data.message);//'Hello Vue!'
- </script>
被代理的属性是响应的,也就是说值的任何改变都是触发视图的重新渲染,设置属性也会影响到原始数据,反之亦然。
但是,以_或者$开头的属性不会被Vue实例代理,因为它们可能和Vue内置的属性或方法冲突了,可以使用例如vm.$data._property的方式访问这些属性。
- <script>
- var values = {
- message: 'Hello Vue!',
- _name: '小火柴'
- }
- var vm = new Vue({
- el: '#app',
- data: values
- })
- console.log(vm._name);//undefined
- console.log(vm.$data._name);//'小火柴'
- </script>
computed
计算属性函数computed将被混入到Vue实例中,所有getter和setter的this上下文自动地绑定为Vue实例。
【注意】不应该使用箭头函数来定义计算属性函数。
下面是关于computed的一个例子。
- <div id="example">
- <p>原始字符串: "{{ message }}"</p>
- <p>反向字符串: "{{ reversedMessage }}"</p>
- </div>
- <script>
- var vm = new Vue({
- el: '#example',
- data: {
- message: '小火柴'
- },
- computed: {
- reversedMessage: function () {
- return this.message.split('').reverse().join('')
- }
- }
- })
- </script>
这里声明了一个计算属性reversedMessage,提供的函数将用作属性vm.reversedMessage的getter上。
- console.log(vm.reversedMessage) // -> '柴火小'
- vm.message = 'Goodbye'
- console.log(vm.reversedMessage) // -> 'eybdooG'
vm.reversedMessage的值始终取决于vm.message的值,可以像绑定普通属性一样在模板中绑定计算属性,当vm.message发生改变时,所有依赖于vm.reversedMessage的绑定也会更新。vm.reversedMessage依赖于vm.message的值,vm.reversedMessage本身并不能被赋值。
【setter】
计算属性默认只有getter,不过在需要的时候也可以提供一个setter。
- <script>
- var vm = new Vue({
- data: { a: 1 },
- computed: {
- // 仅读取,值只须为函数
- aDouble: function () {
- return this.a * 2
- },
- // 读取和设置
- aPlus: {
- get: function () {
- return this.a + 1
- },
- set: function (v) {
- this.a = v - 1
- }
- }
- }
- })
- console.log(vm.aPlus);//2
- vm.aPlus = 3
- console.log(vm.a);//2
- console.log(vm.aDouble);//4
- </script>
methods
通过调用表达式中的methods也可以达到同样的效果。
【注意】不应该使用箭头函数来定义methods函数。
- <div id="example">
- <p>原始字符串: "{{ message }}"</p>
- <p>反向字符串: "{{ reversedMessage() }}"</p>
- </div>
- <script>
- var vm = new Vue({
- el: '#example',
- data: {
- message: '小火柴'
- },
- methods: {
- reversedMessage: function () {
- return this.message.split('').reverse().join('')
- }
- }
- })
- </script>
【缓存】
对于最终的结果,两种方式确实是相同的。然而不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值,这就意味着只要message还没有改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必执行函数。相比而言,只要发生重新渲染,method调用总会执行该函数。
假设有一个性能开销比较大的计算属性A,它需要遍历一个极大的数组和做大量的运算,可能有其他的计算属性依赖于A。如果没有缓存,将不可避免的多次执行A的getter!如果不希望有缓存,则用method替代。
watch
Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动:watch属性。watch属性是一个对象,键是需要观察的表达式,值是对应的回调函数,回调函数得到的参数为新值和旧值。值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性。
【注意】不应该使用箭头函数来定义watch函数。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- </head>
- <body>
- <div id="app">
- <button @click="a++">a加1</button>
- <h5>{{message}}</h5>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- a: 1,
- message: ''
- },
- watch: {
- a: function(newval, oldval) {
- this.message = `a的旧值为:${oldval},a的新值为:${newval}`;
- }
- }
- })
- </script>
- </body>
- </html>
【$watch】
除了使用数据选项中的watch方法以外,还可以使用实例对象的$watch方法,该方法的返回值是一个取消观察的函数,用来停止触发回调。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- </head>
- <body>
- <div id="app">
- <button @click="a++">a加1</button>
- <h5>{{message}}</h5>
- </div>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- a: 1,
- message: ''
- }
- })
- var unwatch = vm.$watch('a', function(newval, oldval) {
- if(newval === 10) {
- unwatch();
- }
- this.message = `a的旧值为:${oldval},a的新值为:${newval}`;
- })
- </script>
- </body>
- </html>
上面的代码中,当a的值更新到10的时候,触发unwatch()来取消观察。点击按钮时,a的值仍然会变化,但是不再触发watch的回调函数。
Vue实例对象的数据选项(火柴)的更多相关文章
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- vue单文件组件data选项的函数体获取vue实例对象
因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...
- 2-3 Vue实例中的数据,事件和方法
上节课模板是写在Vue的实例里面的,现在我们可以把它恢复出来.写在挂载点的内部,看起来会舒服一点.Vue的数据项,可以配置任意的数据名字. <!DOCTYPE html> <html ...
- Vue学习之vue实例中的数据、事件和方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Vue组件的基础用法(火柴)
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
- vue学习笔记(四)——Vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...
- Vue(十二)vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...
- vue实例详解
Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...
随机推荐
- 分享一个电子发票信息提取工具(Python)
电子发票太多,想统计下总额异常困难,网上工具不好用,花了2个小时实现一份,测试过中石油.京东开具的电子发票还行,部分发票名称失败有问题不影响统计,有需要的小伙伴自己拿去改吧. import cmd i ...
- [转] Scala 的集合类型与数组操作
[From] https://blog.csdn.net/gongxifacai_believe/article/details/81916659 版权声明:本文为博主原创文章,转载请注明出处. ht ...
- OpenERP how to set the tree view limit
return { 'name':u'库存报表', 'view_type':'form', 'view_mode':'tree,form', 'res_model':'rainsoft.account. ...
- 高性能web服务器(热死你)Resin Linux的安装、配置、部署,性能远超Nginx支持Java、PHP等
高性能web服务器(热死你)Resin Linux的安装.配置.部署,性能远超Nginx支持Java.PHP等 一. 安装resin 1. 下载resin: 下载地址:http://cauch ...
- (转)aix非计算内存 占用过高 案例一则
原文:http://www.talkwithtrend.com/Article/28621 两台小型机组成的RAC环境,在用topas查看资源使用情况时,发现一台机器的非计算内存占用过高: MEMOR ...
- Git学习系列之Git基本操作拉取项目(图文详解)
前面博客 Git学习系列之Git基本操作推送项目(图文详解) 当然,如果多人协作,或者多个客户端进行修改,那么我们还要拉取(Pull ... )别人推送到在线仓库的内容下来. 大神们是不推荐使用 pu ...
- ServiceLoader解读
SPI的全名为Service Provider Interface.普通开发人员可能不熟悉,因为这个是针对厂商或者插件的.在java.util.ServiceLoader的文档里有比较详细的介绍. 简 ...
- Velocity工作原理解析和优化
在MVC开发模式下,View离不开模板引擎,在Java语言中模板引擎使用得最多是JSP.Velocity和FreeMarker,在MVC编程开发模式中,必不可少的一个部分是V的部分.V负责前端的页面展 ...
- HDU 6225 Little Boxes
Little Boxes Little boxes on the hillside. Little boxes made of ticky-tacky. Little boxes. Little ...
- JDK1.7新特性(2):异常和可变长参数处理
异常 jdk1.7对try--catch--finally的异常处理模式进行了增强,下面我们依次来看增强的方面. 1. 为了防止异常覆盖,给Throwable类增加了addSuppressed方法,可 ...