1. Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。
常用实例属性
app.$data
app.$props
app.$el
Vue 实例使用的根 DOM 元素。
app.$root
当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
app.$options
获取定义在data外的数据和方法。
app.$children
当前实例的直接子组件。
app.$slots
获取被插槽分发的内容。
app.$scopedSlots
获取具名插槽。
app.$refs
获取注册过refs的所有DOM元素和组件实例。
app.$isServer
Vue是否运行于服务端。
常用实例方法
app.$destroy()
主动销毁该实例。
app.$mount('#root')
挂载DOM。
app.$watch
观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。
app.$forceUpdate()
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
app.$nextTick()
使回调函数在 DOM 更新完成后被调用。
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
2. 生命周期方法
beforeCreate()
实例被创建之前执行。在生命周期过程中只执行一次。
created()
实例创建完成之后执行。在生命周期过程中只执行一次。
beforeMount()
挂载组件之前（如果有挂载组件的操作）。在生命周期过程中只执行一次。
mounted()
组件挂载之后。在生命周期过程中只执行一次。
beforeUpdate()
组件更新前。
updated()
组件更新完成。
beforeDestroy()
组件销毁前。
destroyed()
组件被销毁。
3. Vue数据绑定
绑定变量：v-bind
绑定事件：v-on
绑定样式： :class="{active : isActive}"
4. computed和watch使用场景和方法
computed是计算属性（通过其他变量计算得来的另一个属性），在相关响应式依赖发生变化时它们才会重新求值。
watch是侦听器，来响应数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式最有用。
computed和watch都不要去改变自己监听的属性，而是要去生成一个新的值，否则会触发无限循环。
5. Vue原生指令
v-if 和 v-show 的区别
v-if=false生效时会使节点不存在在DOM流中，会动态增删节点，比较耗能；
v-show只是在节点上加上display:none。
v-if可配合v-else-if、v-else使用。
v-for和v-if的优先级
v-for的优先级高于v-if，所以在两者同时使用时，v-if会作用于每一个v-for循环上。
6. Vue组件继承
const ComVue = Vue.extend(Component)
继承的组件的prop需要通过propsData传入，data可以直接改变。
7. 插槽
需求：有一些内容，是在调用组件时根据场景去写的。
子组件：
<div class="container">
<slot></slot>
</div>
父组件使用子组件时：
<base-layout>
123
</base-layout>
<slot></slot>的内容将被123代替。
具名插槽：使用组件时，用slot="name"指定将内容放在何处。
子组件：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父组件使用子组件时：
使用时：
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
注意：一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
作用域插槽
需求：插槽内容能够访问子组件中才有的数据。
子组件：
<span>
<slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
父组件中使用：
<current-user>
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
网友评论