vue中的一些知识点--多看文档

重温vue，一些知识点简单记录。

1、我们都知道当数据变化时，视图会重新渲染。注意：只有当vue实例被创建时，data中存在的属性才是响应式的。后续新添加的属性不会触发视图变化。

使用 Object.freeze() 会阻止修改现有属性，也就意味着响应系统不能再追踪变化。此时强行修改 会报错。

     let data = { seen: true }
     Object.freeze(data);
     let app3 = new Vue({
       el: '#app3',
       data: data
     });

2、不要在选项属性上或者回调使用 箭头函数。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所期的vue实例，经常会报如下错。

Uncaught TypeError: Cannot read property of undefined 或
Uncaught TypeError: this.myMethod is not a function 之类的错误。

3、v-bind 指令。在布尔值的情况下，它们的存在即为true。

    <button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值为 null，false，undefined 时，disabled 属性甚至不会被渲染在 button 元素中。

4、对于所有的数据绑定，vue提供了完整的数据表达式支持。有个限制：每个绑定只能是包含单个表达式。

   <div id="app8">
     {{number + 1}}
     {{ active ? 'active' : 'not-active'}}
     {{ message.split('').reverse().join('') }}
     <div :id=" 'list-' + id "></div>
   </div>

　　模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

5、对于任何的逻辑都应该使用 计算属性。

　　计算属性 和 方法 都可以实现 字符串反转效果，如下：（计算属性不用加 括号，方法需要加 括号）

     <span>{{newMessage}}</span>
     <p>计算属性-逆转：{{ reverseMessage2 }}</p>
     <p>方法-逆转：{{ reverseMessage2() }}</p>

　　注意：计算属性是根据它们的依赖进行缓存的，只要依赖不发生变化，计算属性就可以立即拿到计算结果，而不用再次执行函数。

　　　　相比之下，每次触发渲染时，方法总是会再次调用。

6、侦听属性 watch -- 用来观察和响应vue实例上的数据变动。当你的一些数据随其他数据变化时，很容易滥用watch，通常更好地做法是使用计算属性而不是命令式的watch回调。

　　计算属性默认只有 getter，在需要时也可以提供一个setter。

7、绑定HTML  class

　　对象语法、数组语法(可以嵌套对象语法)

　　用在组件上，当在一个自定义组件上使用class时，这些class会被添加到该组件的根元素。并且不会覆盖原有的class。

8、绑定内联样式

　　对象语法 -- css 可以使用驼峰式，也可以使用短横线分隔(一定要用单引号括起来)。对象语法常常结合返回对象的计算属性使用。

　　数组语法 -- 将多个样式对象应用到同一个元素上。

9、v-if 指令。

　　v-if 使用时，是作用在一个元素上，当需要作用在多个元素上可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

10、通过 key 管理可复用元素。vue会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。

11、v-show 只是根据条件显示或者隐藏，始终被渲染并保留在DOM中。注意：v-show 不支持 template 也不支持 v-else 。

　　与 v-if 对比，v-if 有更大的切换开销，v-show 有更大的渲染开销。因此，如果元素需要频繁的切换，使用v-show较好，如果运行时条件很少改变，使用v-if较好。

12、vue包含一组观察数组的变异方法。它们会触发视图的变化。

　　push()、pop()、shift()、unshift()、splice()、sort()、reverse()

　　vue 不能检测以下数组的变动：利用索引值直接设置一个项、改变数组长度。

　　vue 不能检测对象属性的增加或删除。

　　但是可以使用全局方法 Vue.set(object, key, value) 方法来替代上面方法，以触发视图更新。

　　如果要添加多个属性，参看：https://cn.vuejs.org/v2/guide/list.html

13、使用 计算属性来 筛选或者过滤 数据额，而不是重新备份data。计算属性不合适时，使用方法。

     <div>
       <span>使用计算属性来筛选或过滤，而不是备份数据</span>
       <ul>
         <li v-for="n in reverseNumber">{{n}}</li>
       </ul>
       <span>计算属性不合适时(例如在v-for循环中)，使用方法</span>
       <ul>
         <li v-for="n in sort(numbers)">{{n}}</li>
       </ul>
     </div>

       data: {
         numbers: [1,5,2,6,9,4,3,7]
       },
       computed: {
         reverseNumber: function() {
           return this.numbers.sort().reverse();
         }
       },
       methods: {
         sort: function(data) {
           return data.sort();
         }
       }

　　v-for 也可以取整数，它将重复多次模板。

     <div>
       <span v-for="n in 10">{{n}}</span>
     </div>

14、v-for 和 v-if 作用于同一节点时。

　　v-for 比 v-if 优先级要高，这就意味着 v-if 要重复运行与每一个循环中。

15、事件修饰符

　　.stop、.prevent、.capture、.self、.once、.passive 这些修饰符可以组合使用，使用时顺序很重要。

16、按键修饰符

     <!-- 只有 keycode 是 13 时，调用 submit -->
     <input type="text" @keyup.13="submit">

常用按键别名：.enter、.tab、.delete、.space、.esc、.up、.down、.right、.left

　　可以通过全局 config.keycodes 自定义按键修饰符别名， Vue.config.keycodes.f1 = 112

17、系统修饰键

　　.ctrl、.alt、.meta、.shift

     <!-- ctrl + enter(13) 才能触发此函数 -->
     <input type="text" @keyup.ctrl.13="submit">

　　.exact 修饰符。允许你控制由精确的系统修饰符组合触发的事件。

18、表单处理

　　在文本域插值(<textarea></textarea>)并不会生效，应该使用 v-model 来绑定。

　　修饰符：.lazy、.number、.trim