vue学习笔记（一）

近来，由于团队开发基于vue的倾斜，原本一直致力于在开发团队中推广AngularJS也因新同事的加入（基于vue技术栈），我也开始对vue做一定的学习及研究。

接下来的日子，我会持续更新自己对于vue的学习及在平时开发中遇到的问题在这里做一定的笔记。

个人觉得如果能对angularJS轻车驾熟，对vue上手应该也是很快的，毕竟两款MVVM框架在我整体看来有太多的相似了，当然其核心的思想及理念不是一样的。

接下来就是自己的一些学习心得及笔记了：

vue的计算属性及方法

vue组件中有一个computed字段，官方说的是计算属性，说明白一点就是这个属性可能是其他属性的变种及组合，相比我们直接通过其他属性的来直接得到这个属性，vue肯定是通过了一定手段使其从效率、性能方面得到提升。通过官方文档，我们可以获得以下两点：

• 使得模板更易于维护而不添加过多得运算；
• 计算属性与方法的不同就是：计算属性是通过依赖属性做了一定缓存的，而方法是每次都获取新的数据；

类比学习

AngularJS中是没有计算属性概念的。但是在1.4版本后，模板语法对于一次性属性有一定的更新，可以通过{{::$ctrl.name}}来使模板的这个属性只在初始化的时候，只运行一次，对于后续的更新不会重新渲染，可以通过例子查看demo。代码如下

    const app = angular.module('app.demo', [])
    app.component('computedStyle', {
        template: `
            <p>{{$ctrl.firstName}}</p>
            <p>{{$ctrl.lastName}} </p>
            <p>{{::$ctrl.fullName}}</p>
            <button ng-click="$ctrl.changeName()">chane name</button>
        `,
        controller: class Test {
            constructor() { }
            $onInit() {
                this.firstName = 'Mike'
                this.lastName = 'Jack'
                this.fullName = this.firstName + this.lastName
            }
            changeName() {
                this.firstName = 'Linda'
            }
        }
    })

    angular.bootstrap(document, [app.name])

相同概念 watch方法

watch使用是相同的，当我们在监听某一个属性的变化时用来做的一些处理的回调函数。
注意 watch方法不能滥用