基于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 相关文章推荐
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
解析页面加载与js函数的执行 onload or ready
Dec 12 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 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的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
yii上传文件或图片实例
2014/04/01 PHP
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
使用Python读取大文件的方法
2018/02/11 Python
tensorflow识别自己手写数字
2018/03/14 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
python爬虫要用到的库总结
2020/07/28 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
新年爱情寄语
2014/04/08 职场文书
保护地球的标语
2014/06/17 职场文书
车间核算员岗位职责
2014/07/01 职场文书
以权谋私检举信范文
2015/03/02 职场文书
庆祝教师节主持词
2015/07/06 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis