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

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

我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助:

前面的话

1.基础版监听:

一般地,当模板内容较简单时,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项

场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在
15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了。根据需求配合监听属性我们得到下面的代码:

data

<template>
 <div id="app">
  年齡:<input type="number" v-model="age"><br>
  提示信息:{{infoMsg}}
 </div>
</template>

<script>
export default {
 data() {
  return {
   age: "",
   infoMsg:""
  }
 },
 watch:{
  age:function(val,oldval){
   if(val>0 && val<15){
    this.infoMsg="你还是个小孩"
   }else if(val>15 && val<25){
    this.infoMsg="你已经是个少年"
   }else{
    this.infoMsg="你已经长大了"
   }
  }
 }
}
</script>

data是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化

这里需要特别说明一下的是:坚挺属性方法中的两个参数分别代表的含义:第一个val是当面正在监听的属性的值,oldval是属性改变之前的值,由于这是形参的原因,参数的名字可以自己定义,但是但是参数所代表的含义是不会变化的。

[注意]不应该对data属性使用箭头函数

2.进阶版监听:

<div id="app">
 {{ message }}
</div>


<script>
var values = {message: 'Hello Vue!'}
var vm = new Vue({
 el: '#app',
 data: values
})
console.log(vm);
</script>

下面我们改变一下需求:基础规则不变,但是因为后台数据库的更改(画个圈圈咀咒他)我们需要提交一个这样的数据结构

图片 1

 data() {
  return {
   info: {
    age: ""
   },
   infoMsg: ""
  };
 },

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

由于我们监听的是对象info中的属性age值的变化,所以我们需要使用到的是深度监听,具体代码如下:

console.log(vm.$data);
<template>
 <div id="app">
  年齡:<input type="number" v-model="info.age"><br>
  提示信息:{{infoMsg}}
 </div>
</template>

<script>
export default {
 data() {
  return {
   info: {
    age: ""
   },
   infoMsg: ""
  };
 },
 watch: {
  info: {
   handler: function(val, oldval) {
    var that = this;
    if (val.age > 0 && val.age < 15) {
     that.infoMsg = "你还是个小孩";
    } else if (val.age > 15 && val.age < 25) {
     that.infoMsg = "你已经是个少年";
    } else {
     that.infoMsg = "你已经长大了";
    }
   },
   deep: true
  }
 }
};
</script>

图片 2

在这里需要注意的有两点:1,这里的function不能使用箭头函数替代,如果使用箭头函数的话,this的指向会是全局。2,你会注意到这里多加入一个属性是deep,它的含义表示是否开启深度监听,如果开启值为true,反之为false。

Vue实例也代理了data对象上所有的属性

3.最高级监听:

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

针对第二个案例不知道你有没有发现一个问题:我们监听的是一个对象里面某个属性的变化,但是如果当这个对象里面有很多个值的时候,虽然也可以使用第二种方法进行监听,但是这将会是对资源的一种极大的浪费,身为一个严谨的程序员(微笑脸),绝对不能允许这样的事情发生,所以我们可以结合computed(计算属性)对上面的代码进行优化:

被代理的属性是响应的,也就是说值的任何改变都是触发视图的重新渲染。设置属性也会影响到原始数据,反之亦然

<template>
 <div id="app">
  年齡:<input type="number" v-model="info.age"><br>
  提示信息:{{infoMsg}}
 </div>
</template>
<script>
export default {
 data() {
  return {
   info: {
    age: "",
    name: "",
    hobit: ""
   },
   infoMsg: ""
  };
 },
 computed: {
  ageval: function() {
   return this.info.age;
  }
 },
 watch: {
  ageval: {
   handler: function(val, oldval) {
    var that = this;
    if (val > 0 && val < 15) {
     that.infoMsg = "你还是个小孩";
    } else if (val > 15 && val < 25) {
     that.infoMsg = "你已经是个少年";
    } else {
     that.infoMsg = "你已经长大了";
    }
   },
   deep: true
  }
 }
};
</script>

图片 3

通过上面的我们看出,这次我们监听的是计算属性ageval,而计算属性返回的则是info对象中age的值,与第二次的代码进行比较我们可以发现两次代码中监听的一个是对象info,一个是info对象中age的值,性能大大增强,这就是我们期待的结果了。

但是,以_$开头的属性不会被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>

以上所述是小编给大家介绍的vue2.0监听属性的使用心得及搭配计算属性的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

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>

结果如下

图片 4

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

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

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

图片 5

admin

网站地图xml地图