【九月打卡】第一天 vue2.5入门

学习课程名称：vue2.5入门
章节名称：Vue基础语法
讲师：Dell

课程内容：

1. 创建一个Vue实例
2. 挂载点、模板、实例
3. 实例中的数据、事件、方法
4. 属性绑定和双向数据绑定
5. 计算属性和监听器
6. v-if v-show v-for

创建Vue实例

var vm = new Vue({
            el: '#app', 
            data: { 
                msg: '欢迎学习Vue!' 
            }
        })

双向数据绑定

vue是采用数据劫持配合发布者-订阅者的模式的方式，通过Object.defineProperty()来劫持各个属性的getter和setter，在数据变动时，发布消息给依赖收集器(dep中的subs)，去通知(notify)观察者，做出对应的回调函数，去更新视图。

计算属性和监听器区别

计算属性：
(1).计算属性是一个函数， 返回的结果是计算属性的结果。
(2).第一次计算的时候会把结果缓存起来。
(3).后续用到计算属性，如果计算属性中用到的数据没有发生变化，则会读取缓存的结果， 不会重新计算。反之重新计算，并更新值到缓存中

注意：
每次计算的结果缓存的时候，都会重新创建一个变量保存结果。

监听器：
(1).当我们定义一个侦听器的时候，侦听器与data中的属性同名，当属性的值发生改变的时候，侦听器被触发执行。

注意：
一个侦听器对应data中的一个属性，当属性发生变化时触发侦听器的执行。

v-if 🆚 v-show
实现本质方法区别
v-show本质就是标签display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

编译的条件
v-show都会编译，初始值为false，只是将display设为none，但它也编译了
v-if初始值为false，就不会编译了

性能
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。

用法
v-if更灵活