澳门新萄京8522用Vue.js达成监听属性的更动

用Vue.js达成监听属性的扭转,vue.js监听属性

前言

创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的
Object.defineProperty将它们转为 getter/setter,在当中间 Vue
能够追踪依赖、文告变化。

const vm = new Vue({
 data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的
})

着重属性别变化化

Vue 的实例提供了 $watch 方法,用于观望属性别变化化。

const vm = new Vue({
 data: {foo: 1}
})

vm.$watch('foo', function (newValue, oldValue) {
 console.log(newValue, oldValue) // 输出 2 1
 console.log(this.foo) // 输出 2
})

vm.foo = 2

当属性别变化化后,响应函数将会被调用,在个中间,this 自动绑定到 Vue 的实例
vm 上。

内需留心的是,响应是异步的。

如下:

const vm = new Vue({
 data: {foo: 1}
})

vm.$watch('foo', function (newValue, oldValue) {
 console.log('inner:', newValue) // 后输出 "inner" 2
})

vm.foo = 2
console.log('outer:', vm.foo) // 先输出 "outer" 2

通过 $watch Vue 达成了多少和视图的绑定。观察到多少变化,Vue 便异步更新
DOM
,在同等事件循环内,多次数额变化将会被缓存起来,在后一次事变循环中,Vue
刷新队列并仅推行必要的翻新。

如下:

const vm = new Vue({
 data: {foo: 1}
})

vm.$watch('foo', function (newValue, oldValue) {
 console.log('inner:', newValue) // 后只输出一次 "inner" 5
})

vm.foo = 2
vm.foo = 3
vm.foo = 4
console.log('outer:', vm.foo) // 先输出 "outer" 4
vm.foo = 5

总括属性

MV* 中,将 Model 层数据表现到
View,平日有复杂的多少管理逻辑,这种意况下,使用总计属性 (computed
property) 更精明。

const vm = new Vue({
 data: {
 width: 0,
 height: 0,
 },
 computed: {
 area () {
  let output = ''
  if (this.width > 0 && this.height > 0) {
  const area = this.width * this.height
  output = area.toFixed(2) + 'm²'
  }
  return output
 }
 }
})

vm.width = 2.34
vm.height = 5.67
console.log(vm.area) // 输出 "13.27m²"

在企图属性之中,this 自动绑定
vm,由此表明总括属性时要求防止使用箭头函数。

上例中,vm.width
vm.height是响应的,vm.area个中第贰次读取this.width
this.height时,Vue 收罗其做为 vm.area的依赖,此后
vm.widthvm.height变化时,vm.area重新求值。总计属性是依照它的信赖性缓存,若是
vm.widthvm.height未曾转换,数十次读取
vm.area,会立刻重回在此之前的计量结果,而毋庸再一次求值。

平等是因为 vm.widthvm.height是响应的,在
vm.area中能够将借助的天性赋值给一个变量,通过读取变量来压缩读取属性次数,同期消除在条件分支中,Vue
偶然会无法收罗到凭仗的标题。

落实如下:

const vm = new Vue({
 data: {
 width: 0,
 height: 0,
 },
 computed: {
 area () {
  let output = ''
  const {width, height} = this
  if (width > 0 && height > 0) {
  const area = width * height
  output = area.toFixed(2) + 'm²'
  }
  return output
 }
 }
})

vm.width = 2.34
vm.height = 5.67
console.log(vm.area) // 输出 "13.27m²"

通过 ob.js 单独使用 Vue
的性质观察模块

为便于学习和选择,ob.js 将 Vue 中属性阅览模块提取并封装了眨眼间间。

ob.js GitHub 地址:

安装

npm install --save ob.js

调查属性别变化化

const target = {a: 1}
ob(target, 'a', function (newValue, oldValue) {
 console.log(newValue, oldValue) // 3 1
})
target.a = 3

增添总计属性

const target = {a: 1}
ob.compute(target, 'b', function () {
 return this.a * 2
})
target.a = 10
console.log(target.b) // 20

像声明 Vue 实例同样传入参数集结

const options = {
 data: {
 PI: Math.PI,
 radius: 1,
 },
 computed: {
 'area': function () {
  return this.PI * this.square(this.radius)
 },
 },
 watchers: {
 'area': function (newValue, oldValue) {
  console.log(newValue) // 28.274333882308138
 },
 },
 methods: {
 square (num) {
  return num * num
 },
 },
}
const target = ob.react(options)
target.radius = 3

总结

上述正是那篇小说的全体内容了,希望本文的内容对大家的学习或许办事能带来一定的协助,如若有毛病大家能够留言调换。

前言
创设 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的
Object.defineProperty 将它们转为 getter/s…

总结

就算 Vue.js 提供了 API 动态地抬高响应属性,还是引入在 data
对象上声称全部的响应属性。


const options = {
 data: {
 PI: Math.PI,
 radius: 1,
 },
 computed: {
 'area': function () {
  return this.PI * this.square(this.radius)
 },
 },
 watchers: {
 'area': function (newValue, oldValue) {
  console.log(newValue) // 28.274333882308138
 },
 },
 methods: {
 square (num) {
  return num * num
 },
 },
}
const target = ob.react(options)
target.radius = 3
// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

 

侦察属性别变化化

本文已被收拾到了《Vue.js前端组件学习课程》,应接大家学习阅读。

View Code

前言

这么做:

 

const vm = new Vue({
 data: {foo: 1}
})

vm.$watch('foo', function (newValue, oldValue) {
 console.log('inner:', newValue) // 后输出 "inner" 2
})

vm.foo = 2
console.log('outer:', vm.foo) // 先输出 "outer" 2

澳门新萄京8522 1

<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>
const vm = new Vue({
 data: {foo: 1}
})

vm.$watch('foo', function (newValue, oldValue) {
 console.log('inner:', newValue) // 后只输出一次 "inner" 5
})

vm.foo = 2
vm.foo = 3
vm.foo = 4
console.log('outer:', vm.foo) // 先输出 "outer" 4
vm.foo = 5

什么追踪变化

但是,以_抑或$起始的天性不会被Vue实例代理,因为它们大概和Vue内置的属性或形式冲突了,能够使用诸如vm.$data._property的方法访谈那些属性。

澳门新萄京8522,Vue 的实例提供了 $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>

安装

模板中每一个指令/数据绑定都有叁个对应的 watcher
对象,在测算进程中它把质量记录为借助。之后当依赖的 setter
被调用时,会接触 watcher 重新计算 ,也就能招致它的关联指令更新 DOM。

上边是有关computed的四个例证。

加多总括属性

var data = { a: 1 }
var vm = new Vue({
 data: data
})
// `vm.a` 和 `data.a` 现在是响应的

vm.b = 2
// `vm.b` 不是响应的

data.b = 2
// `data.b` 不是响应的

【注意】不该利用箭头函数来定义watch函数。

如下:

对于 Vue 实例,能够运用 $set(key, value) 实例方法:

 

const target = {a: 1}
ob(target, 'a', function (newValue, oldValue) {
 console.log(newValue, oldValue) // 3 1
})
target.a = 3

<div
id=”example”>{{msg}}</div>

<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 将遍历 data 的属性,通过 ES5 的
Object.defineProperty将它们转为 getter/setter,在其里面 Vue
能够追踪正视、布告变化。

如上正是本文的全体内容,希望对我们的学习抱有接济,也指望大家多多扶助脚本之家。

对此最终的结果,三种方法真就是一律的。可是不等的是计量属性是基于它们的凭借进行缓存的。总括属性唯有在它的相干正视发生转移时才会再一次求值,那就表示要是message还未有退换,多次拜会reversedMessage计算属性会立刻回去之前的总括结果,而无需实践函数。比较来说,只要发生再度渲染,method调用总会施行该函数。

当属性别变化化后,响应函数将会被调用,在其里面,this 自动绑定到 Vue 的实例
vm 上。

计量属性 example 唯有三个借助:vm.msg。Date.now() 不是
响应信赖,因为它跟 Vue 的数量观望系统非亲非故。由此,在探访 vm.example
时将开掘时间戳不改变,除非 vm.msg 变了。

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

通过 ob.js 单独行使 Vue
的性格观看模块

var vm = new Vue({
 el: '#example',
 data: {
 msg: '123'
 }
})
vm.msg = 'new message' // 修改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})

watch

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图