Vuejs2.0学习之一(新生命周期,新模板语法,计算缓存,自定义watcher)
博客专区 > originDu 的博客 > 博客详情
Vuejs2.0学习之一(新生命周期,新模板语法,计算缓存,自定义watcher)
originDu 发表于6个月前
Vuejs2.0学习之一(新生命周期,新模板语法,计算缓存,自定义watcher)
  • 发表于 6个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

经过一段时间的学习,对vuejs1.0有了一定的了解,虽然没有完全看完,但是可以开始2.0的学习了,毕竟有些改动,旧的终归是要淘汰的。

无意中发现了2.0中文版链接http://vuefe.cn/guide/,作为接下来的学习手册。同样的东西将跳过

  1. 2.0基础部分差不多,开始有不一样的是生命周期,一张图表达 
    生命周期
    具体怎么用后面慢慢接触

  2. 模板语法与1.0也有所区别

2.1 首先增加了模板语法的灵活性,如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可选的 JSX 语法。具体如何使用进阶篇会有介绍

2.2 插值的方式也有所改变。 
a.{{}}依然用来做模板插值 
b.禁止刷新模板以前用的是{{*}},现在用v-once,<span v-once>This will never change: {{ msg }}</span> 
c.插入纯html代码以前用{{{}}},现在用v-html,<div v-html="rawHtml"></div>

2.3 Vue 2.x 中,过滤器只能在{{}} 绑定中使用。为了在指令绑定中实现同样的行为,你应该使用计算属性 
如{{msg | filter}}

2.4 眼泪杠杠,作为官方教程,它终于解释了一下v-指令的作用分别是什么 
指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。 
v-bind 指令被用来响应地更新 HTML 属性 
v-on 指令,它用于监听 DOM 事件

  1. 计算属性 
    3.1 计算缓存。这个概念我在前面的学习中并木有发现哇,原来计算属性computed是对方法返回值做了缓存的
computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
  •  

比如这个栗子,reversedMessage方法的返回值是依赖message的,根据前面的原理,当message发生了变化,会通知vm调用其getter方法拿到当前值,所以reversedMessage会更新。 
同样的,将reversedMessage定义在methods里面是一样的。区别在于,当采用计算属性时,如果message没有发生变化,无论调用多少次reversedMessage,其返回值不会再次计算,永远是缓存的上一次的值;而使用methods没有缓存,每次都会再次计算。虽然这个栗子的结果是一样的,但是过程是不一样的,计算属性省去了计算的步骤,时间上至少占优势。而且另外的一些栗子中结果就不同了,原文中的:

computed: {
  now: function () {
    return Date.now()
  }
}
  •  

此时now方法没有依赖任何属性,所以返回值永远不变。如果采用methods就会得到正确的值。

3.2 watch没有什么变化,只是又指出了一种写法,以前我们是这么写:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})
  •  

原来还可以这么写

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
  •  

3.4 最后介绍了如何自定义watcher的方法 
一扫过去发现其实是用组件的方式

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 question 发生改变,这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  }
  ...
  });
  •  

一目了然

共有 人打赏支持
粉丝 2
博文 44
码字总数 15850
×
originDu
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: