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

<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>

假设有一个性能开销比较大的的计算属性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实例对象的数据选项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue实例简单方法介绍

    Vue实例的一些简单方法 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box&

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

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data data是Vue实例的数据对象.Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化 [注意]不应该对data属性使用箭头函数 <div id="app"> {{ message }} </div> <script&

  • 基于Vue实例生命周期(全面解析)

    前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即

  • 详解vue beforeRouteEnter 异步获取数据给实例问题

    场景: vue-router 路由钩子 beforeRouteEnter 可以用来在初始进入页面前,http 异步获取数据 mockData ,预先判断是进入 A 页.还是 B 页,还是留在本页:而如果留在本页的话,还需要在 mounted 根据 mockData 来判断显示哪种状态(可以在本页面实例创建后,重新发起 http 请求获取 mockData ,但是没有必要,造成代码冗余): 执行顺序: async beforeRouteEnter(to, from, next) { let res

  • vue中的计算属性的使用和vue实例的方法示例

    本文介绍了vue计算属性的使用和vue实例的方法示例,分享给大家,具体如下: 计算属性 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一个表达式的逻辑,应当使用计算属性. vue 计算属性 当我们想要根据一端业务代码的执行结果来返回属性的值,就可以使用计算属性computed了, 计算属性是一个有结果的函数,有get方法和set方法,get方法,

  • Vue实例初始化为渲染函数设置检查源码剖析

    目录 引言 _renderProxy是干什么的 initProxy方法 总结 引言 之前的文章提到,Vue实例化时_init方法做了很多处理,其中就有这么一段: if (__DEV__) { initProxy(vm) } else { vm._renderProxy = vm } 在生产模式下,_renderProxy直接指向了Vue实例本身,而在开发环境下调用了initProxy方法,那么它究竟是做什么的呢? _renderProxy是干什么的 通过对_renderProxy进行全局搜索,我

  • vue.js基于v-for实现批量渲染 Json数组对象列表数据示例

    本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据.分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便.即使是复杂的 Json数组对象,也可以使用 多层嵌套的 v-for 实现,格式如下: <div v-for="(item,index) in items"> <div v-for="(list,index) in item.lists&quo

  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta

  • Vue实例的对象参数options的几个常用选项详解

    一. 新建一个Vue实例可以有下列两种方式: 1.new一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式 items:['item 1','item 2','item 3'], todo:'' }, methods:{ // 方法成员 rm:function(i){ this.items.splice(i,1) } } }) // 之后再 export def

  • vue实例的选项总结

    一.数据 API:https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE 1. data 类型:Object | Function 限制:组件的定义只接受 function 详细:Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化.对象必须是纯粹的对象 (含有零个或多个的 key/value 对).当一个组件被定义,data 必须声明

  • vue.js实例对象+组件树的详细介绍

    vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中 在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量 组件注册语法糖 全局组件 A方

随机推荐