1、Object.freeze() 冻结阻止当前对象响应发生变化
    eg: 

    1. var obj = {
    2.   foo: 'bar'
    3. }
    4. Object.freeze(obj)
    5. new Vue({
    6.   el: '#app',
    7.   data: obj
    8. })
    1. <div id="app">
    2.   <p>{{ foo }}</p>
    3.   <!-- 这里的 `foo` 不会更新！ -->
    4.   <button v-on:click="foo = 'baz'">Change it</button>
    5. </div>

    2、vue实例自身暴露的实例property和方法

    1. var data = { a: 1 }
    2. var vm = new Vue({
    3.   el: '#example',
    4.   data: data
    5. })
    7. vm.$data === data // => true
    8. vm.$el === document.getElementById('example') // => true
    10. // $watch 是一个实例方法
    11. vm.$watch('a', function (newValue, oldValue) {
    12.   // 这个回调将在 `vm.a` 改变后调用
    13. })

    3、生命周期
    image.png

    4、动态参数绑定
    …

    5、缩写

    1. <!--v-bind-->
    2. <!-- 完整语法 -->
    3. <a v-bind:href="url">...</a>
    5. <!-- 缩写 -->
    6. <a :href="url">...</a>
    8. <!-- 动态参数的缩写 (2.6.0+) -->
    9. <a :[key]="url"> ... </a>
    11. <!--v-on-->
    12. <!-- 完整语法 -->
    13. <a v-on:click="doSomething">...</a>
    15. <!-- 缩写 -->
    16. <a @click="doSomething">...</a>
    18. <!-- 动态参数的缩写 (2.6.0+) -->
    19. <a @[event]="doSomething"> ... </a>

    6、计算属性
    计算属性是基于它们的响应式依赖进行缓存的
    **
    7、class与style绑定
    1）用在对象上：


    2）用在数组上

    1. <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    3. <div v-bind:class="[{ active: isActive }, errorClass]"></div>

    3）用在组件上

    1. Vue.component('my-component', {
    2.   template: '<p class="foo bar">Hi</p>'
    3. })
    4. 然后在使用它的时候添加一些 class：
    6. <my-component class="baz boo"></my-component>
    7. HTML 将被渲染为：
    9. <p class="foo bar baz boo">Hi</p>
    10. 对于带数据绑定 class 也同样适用：
    12. <my-component v-bind:class="{ active: isActive }"></my-component>
    13. 当 isActive 为 truthy[1] 时，HTML 将被渲染成为：
    15. <p class="foo bar active">Hi</p>

    8、provide & inject 跨组件传值
    可实现跨组件传值，数据的流只能是向下传递
    provide: 必须在分级组件（不一定是app.vue）进行使用，给后代组件注入依赖（属性或方法）

    inject: 必须在子组件使用，获取根组件定义的跨组件传递的数据。
    应用：

    1. 根组件定义：
    3. <template>
    4.   <div id="app">
    5.     <h1>appVue父组件</h1>
    6.     <Child9/>
    7.   </div>
    8. </template>
    10. <script>
    11. import Child9 from './components/child9'
    12. export default {
    13.   components:{
    14.     Child9,
    15.   },
    16.   /*
    17.   provide(){    //provide作为一个方法使用 ( 推荐使用 )。
    18.     return{
    19.       'userName' : 'bruce',
    20.     }
    21.   },
    22.   */
    23.   provide : {  //provide也可以作为一个对象进行使用.
    24.     "userName" : 'bruce',
    25.   }
    26. }
    27. </script>
    28. 子组件接收：
    30. <template>
    31.     <div class="box">
    32.         <h2>组件10</h2>
    33.         <h3>接受到根组件的传递的数据{{userName}}</h3>   <!-- 使用根组件传递过来的数据 -->
    34.     </div>
    35. </template>
    36. <script>
    37. export default {
    38.    // inject : ['userName']     //inject后面用一个数组接收
    39.    inject : {                   //inject后面可以是一个对象
    40.         userName : {
    41.             default : '默认值'  //指定默认值
    42.         }
    43.     }
    44. }
    45. </script>

    9、组件间传值(https://segmentfault.com/a/1190000019208626)
    1）props / $emit

    2） $emit / $on

    3） vuex

    4） $attrs / $listeners