基于Vue实例对象的数据选项


Posted in Javascript onAugust 09, 2017

前面的话

一般地,当模板内容较简单时,使用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实例对象的数据选项

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

console.log(vm.$data);
基于Vue实例对象的数据选项

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实例代理,因为它们可能和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>

结果如下

基于Vue实例对象的数据选项

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

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

结果如下图所示,vm.reversedMessage依赖于vm.message的值,vm.reversedMessage本身并不能被赋值

基于Vue实例对象的数据选项

【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 调用总会执行该函数。如下所示

<div id="example">
 <p>计算属性: "{{ time1 }}"</p>
 <p>methods方法: "{{ time2() }}"</p>
</div>
<script>
var vm = new Vue({
 el: '#example',
 computed:{
 time1: function () {
  return (new Date()).toLocaleTimeString()
 }
 },
 methods: {
 time2: function () {
  return (new Date()).toLocaleTimeString()
 }
 } 
})
</script>
基于Vue实例对象的数据选项

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

watch

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

[注意]不应该使用箭头函数来定义 watch 函数

<div id="app">
 <button @click="a++">a加1</button>
 <p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
 el: '#app',
 data: {
 a: 1,
 message:''
 },
 watch: {
 a: function (val, oldVal) {
  this.message = 'a的旧值为' + oldVal + ',新值为' + val;
 }
 }
})
</script>

上面代码中,当a的值发生变化时, 通过watch的监控,使message输出相应的内容

【$watch】

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

<div id="app">
 <button @click="a++">a加1</button>
 <p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
 el: '#app',
 data: {
 a: 1,
 message:''
 }
})
var unwatch = vm.$watch('a',function(val, oldVal){
 if(val === 10){
 unwatch();
 }
 this.message = 'a的旧值为' + oldVal + ',新值为' + val; 
})
</script>

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

基于Vue实例对象的数据选项

以上这篇基于Vue实例对象的数据选项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
react-native之ART绘图方法详解
Aug 08 #Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 #Javascript
angular+ionic返回上一页并刷新页面
Aug 08 #Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 #Javascript
原生JS+Canvas实现五子棋游戏
May 28 #Javascript
You might like
php 判断数组是几维数组
2013/03/20 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
jquery中animate动画积累的解决方法
2013/10/05 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python和ruby,我选谁?
2017/09/13 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Python的互斥锁与信号量详解
2019/09/12 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
剪彩仪式主持词
2014/03/19 职场文书
民主评议党员总结
2014/10/20 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
农业项目合作意向书
2015/05/08 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
公司备用金管理制度
2015/08/04 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
如何在Python项目中引入日志
2021/05/31 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis