vue 细节注意

Posted 2020-10-03 瓶子2333

　　*只有vm.$data这些被代理的属性是响应的,能够重新渲染视图

　　*注意，不要在实例属性或者回调函数中（如 vm.$watch(‘a‘, newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父级上下文，所以 this 不会像预想的一样是 Vue 实例，而且 this.myMethod是未被定义的。

　　*常用的生命周期钩子：[before]created、mounted、updated、destroyed，钩子的 this 指向调用它的 Vue 实例。

　　*render

　　*插值：

　　　　1.文本 {{vm.$data}}  ，可以绑定data和computed， 可以使用v-once 只绑定一次不会重新渲染。

　　　　2.纯html   v-html="rawHTML"   --不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎

　　　　3.html特性 v-bind

　　　　4.javascript表达式  {{}} 和v-bind 可以且只能是单个js表达式，表达式里只能访问全局变量的一个白名单

　　　　5.指令 v-  期望所指的值是js表达式（除了v-for）,操纵DOM渲染的v-用等于号“=”，操纵特性的v-用冒号“：”

　　　　6修饰符 

　　　　7.过滤器  用在mustache 插值和 v-bind 表达式：<div v-bind:id="rawId | formatId"> 或者{{ message | filter2| filter3}}  ,可串联

　　　　　　在vm中filters属性：

　　　　　　　　filters: {

 

　　　　　　　　　　capitalize: function (value) {

 

　　　　　　　　　　if (!value) return ‘‘

 

　　　　　　　　　　value = value.toString()

 

　　　　　　　　　　return value.charAt(0).toUpperCase() + value.slice(1)

 

　　　　　　　　　　}

 

　　　　　　　　}

　　　　8.计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。只要发生重新渲染，method 调用总会执行该函数。

　　　　9.v-bind用于绑定class和 style 表达式的结果类型除了字符串之外，还可以是对象或数组。

　　　　　class:　　<div class="static"   v-bind:class="{ active: isActive, ‘text-danger‘: hasError }"> </div>   或者一个classObj

　　　　　　　　　　--------------------------------------------------------

　　　　　　　　　　<div v-bind:class="[activeClass, errorClass]">                   ===>>         <div class="active text-danger"></div>

　　　　　　　　　　data: {
　　　　　　　　　　　　activeClass: ‘active‘,
　　　　　　　　　　　　errorClass: ‘text-danger‘
　　　　　　　　　　}

 

　　　　　style:　　<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"></div>  或者一个styleObj

　　　　　　　　　　data: {

　　　　　　　　　　　　activeColor: ‘red‘,

　　　　　　　　　　　　fontSize: 30

　　　　　　　　　　}

　　　　　　　　　　-------------------------------------------------------

　　　　　　　　<div v-bind:style="styleObject"></div>

　　　　　　　　　　data: {

　　　　　　　　　　　　styleObject: {

　　　　　　　　　　　　color: ‘red‘,

　　　　　　　　　　　　fontSize: ‘13px‘

　　　　　　　　　　　　}

　　　　　　　　　　}

　　　　　10.条件渲染：v-if  v-else  v-else-if （有更高的切换开销）。vue中元素经常会被复用，可以加key特性避免复用<input placeholder="Enter your username" key="username-input">

　　　　　　　　　　　　v-show只是简单切换display,不支持 <template> 语法，也不支持 v-else。

　　　　　11.v-for渲染：  

　　　　　　　　　　<li v-for="(item, index) in items">

　　　　　　　　　　<div v-for="(value, key, index) in object">

　　　　　　　　　　自定义组件使用v-for：

　　　　　　　　　　<my-component
　　　　　　　　　　v-for="(item, index) in items"
　　　　　　　　　　v-bind:item="item"
　　　　　　　　　　v-bind:index="index"
　　　　　　　　　　v-bind:key="item.id"
　　　　　　　　　　></my-component>

　　　　　　　　　　　　组件有自己的作用域，所以需要v-bind将迭代数据传递给它；

　　　　　　　　　　　*2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

　　　　　　　　　　　*v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

　　　　　　　　　　　　*组件中加key特性，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，说到底是为了提高遍历/渲染效率。详情：https://www.zhihu.com/question/61064119

　　　　　　12.数组的变异方法：example1.items.push()    会改变原始数组。

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

　　　　　　　　非变异方法：filter(), concat(), slice() 返回新数组。Vue 实现了一些智能启发式方法来最大化 DOM 元素重用，，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

　　　　　　　　由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如： vm.items.length = newLength

　　　　　　　　solution：

　　　　　　　　　　1.Vue.set(example1.items, indexOfItem, newValue)  或者example1.items.splice(indexOfItem, 1, newValue)

　　　　　　　　　　2.example1.items.splice(newLength)

　　　　　　　　特殊情况：我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。

　　　　　　　　<li v-for="n in evenNumbers">{{ n }}</li>    计算属性返回过滤后的新数组

　　　　　　　　在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：<li v-for="n in even(numbers)">{{ n }}</li>