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 的设计无疑受到了它的启发.因此在文档中经常会使用 ...
随机推荐
- noip rp++
from JOKER-Y
- C#二进制位算 权限
关于权限管理,之前所做的都是一个权限对应一条数据,比方A页面有增删改查四个权限,那么用户在权限管理表中相对应AA页面有四条记录.后来改用二进制运算,发现省事很多. 首先说下位运算 熟悉一下操作符,懒得 ...
- CentOS 7 主机名bogon解决办法
转https://blog.csdn.net/qq_24221531/article/details/80334942 一.修改linux主机的配置文件/etc/hostname 和 /etc/hos ...
- 那些H5用到的技术（6）——屏幕适配
前言长屏适配单页适配参考 前言 曾经屏幕适配一直是个头疼的问题,各种坑,各种浏览器&设备兼容问题,好在的是,随着技术&标准的不断发展,这个问题得到了极大程度的解决,这篇文章主要对之前开 ...
- hibernate的反向生成改懒加载的地方
改变懒加载只需要把生成的文件中的获取类型改为eager fetch = FetchType.EAGER @ManyToOne(fetch = FetchType.EAGER)//把懒加载换成饿加载模式 ...
- Android版本信息及与Linux和Java的关系
1.Android与Linux和Java的关系 Android严格来说,不能算是Linux,Android是一个统称,具体来说,是Google用了Linux的一个核心,用这个核心来管理进程,控制硬件. ...
- 《Algorithms算法》笔记：元素排序(3)——洗牌算法
<Algorithms算法>笔记:元素排序(3)——洗牌算法 Algorithms算法笔记元素排序3洗牌算法 洗牌算法 排序洗牌 Knuth洗牌 Knuth洗牌代码 洗牌算法 洗牌的思想很 ...
- 趣说Java：我是一个线程
第一回 初生牛犊 我是一个线程,我一出生就被编了个号:0x3704,然后被领到一个昏暗的屋子里,在这里我发现了很多和我一模一样的同伴. 我身边的同伴0x6900 待的时间比较长,他带着沧桑的口气对我说 ...
- Java网络编程（二）关于Socket的一些个人想法
1.Socket之间是如何通信的? 1.1 通信是要两两之间进行的所以应该有至少一个客户端(Client)和一个服务器端(Server),一般来说都是多个c端对一个s端---c\s 1.2 在客户端: ...
- PHP之mb_internal_encoding使用
mb_internal_encoding (PHP 4 >= 4.0.6, PHP 5, PHP 7) mb_internal_encoding - Set/Get internal chara ...