Vue知识点运行时编译时指Vue初始化时没有提供render()函数，这时会去找template模版属性，去解析它，并且

Vue不同版本的包

运行时编译&构建时编译

运行时编译时指Vue初始化时没有提供render()函数，这时会去找template模版属性，去解析它，并且转换成render()函数。所以为了减少在运行时编译带来的开销，一般项目都是在构建时编译生成render()函数，运行时直接执行，效率更高。使用构建时编译，则运行时只需要依赖去除编译模块代码的vue.js包；而使用运行时编译时，则需要依赖完整的vue.js包。

普通`data`属性&`computed`属性

data：每次访问时都会调用该属性的get()方法求值
computed：每次访问时，如果它没有依赖其他响应式的数据，则该值永远都不会变化；如果有依赖其他响应式的数据，则只会在其依赖的那些数据改变了才会重新求值，其他依赖的不变时，则返回之前计算过的值，这就是缓存作用。例如：一个computed的定义为去求一个长数组的和，如果该数组未变化，则只需计算一次，后续的访问都使用上次的缓存；如果某些场景需要每次都重新求值，则定义成method。 computed默认只有get方法，就是直接对其进行赋值是无效的，不过可以自己定义set方法，如：

// 调用vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新，触发重新求值
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

v-bind和v-on指令

v-bind：用于给元素绑定属性，缩写形式（:src），属性名可以是任意符合html规范的值（如href、src、style、disable等），也可以是动态参数（v2.6.0 新增），如下：

<!-->如果vm的data或computed中有个attributeName变量，若attributeName的求值为href，
意思是通过动态求值给span绑定属性，而不是写死的属性名，达到可编程<-->
<span :[attributeName]="url"></span>

v-on：用于给元素绑定事件，缩写形式（@click），也可以是动态参数（v2.6.0 新增），在事件名后面可以加修饰符（如@click.stop、prevent、passive等）
note：当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除

绑定class(数组语法和对象语法)

数组语法比较灵活，数组语法中也支持对象语法和三目运算符，如

<p :class="['default-class', {isActive: 'active-class'}, isOpen ? 'open': '']">aaa</p>

绑定style

绑定内联样式

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

绑定内联样式，使用对象

<!-->绑定单个样式对象<-->
<div :style="styleObj"></div>
<!-->绑定多个样式对象，使用数组语法<-->
<div :style="[styleObj1, styleObj2]"></div>

computed: {
  styleObj() {
  	return {
    	color: 'red',
        fontSize: this.fontSize
    }
  }
}

v-for指令

Vue不推荐v-for和v-if作用于同一节点上
因为v-for和v-if处于同一节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

<!-->v-for使用数组<-->
<ul>
  <li v-for="(item, index) in arr"></li>
  <!-->
  使用of
  <li v-for="(item, index) of arr"></li>
  <-->
</ul>

<!-->v-for使用对象，value为属性值，name为属性名，index为索引<-->
<!-->属性的顺序是按照Object.keys()结果顺序，但是不能保证它的结果在不同的JavaScript引擎下都一致<-->
<ul>
  <li v-for="(value, name, index) in obj"></li>
</ul>

<!-->v-for使用范围值<-->
<ul>
  <!-->模板会循环渲染100次，item从0~99<-->
  <li v-for="(item, index) in 100">{{ item }}</li>
</ul>

key属性

key属性文档
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
如果下面两个input标签绑定的key值是一样的或者都没有绑定key时，在if else切换状态显示时，Vue会复用label和input两个标签，只不过是替换对应的属性而已（如：placeholder等），复用之后input的输入内容还是之前的。

<!--来自官方文档-->
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

在v-for循环渲染中，为每个item绑定独一无二的key是很有必要的(当仅仅是数组长度变化时，能够复用之前的已创建的元素，从而不用重新渲染)，比以角标index作为key好的多，因为index会在数组中间插入数据时发生变化，导致后续部分的元素的key变化，从而无法复用，额外耗了性能。

Vue组件

Vue组件知识点

Vue知识点