vue基础知识

1.v-model 原理（包含两部操作）

例如 input的动态改变输入值
方法1：v-model
方法二：:value @input事件

2.vue组件化思想（树形结构）

将一个页面 拆分成多个组件，然后进行组合
组件的使用步骤：
（1）创建组件构造器（调用Vue.extend()方法）
（2）注册组件（调用Vue.component()方法）
（3）使用组件（在Vue实例的作用范围内使用）
组件：全局组件 局部组件

全局组件（整个页面的Vue实例中使用） Vue.component(‘my-omponent’, cpm) //全局组件
局部组件（当前定义的Vue实例中使用） components:{ cpm:cpm} //局部组件

3.父组件与子组件

// 子组件
const cpm1 = Vue.extend({
template: <div id="app"> <h3>子组件标题</h3> <p>我是组件内容</p> </div>
})
// 父组件
const cpm2 = Vue.extend({
template: <div id="app"> <h3>父组件标题</h3> <p>我是组件内容</p> <cpm1></cpm1> </div>,
components: {
cpm1: cpm1
}
})
const app = new Vue({
el: ‘#app’,
2. // 语法糖注册局部组件
components: {
cpm2: cpm2,
}
})

4.组件不能直接访问Vue实例中的data

5.组件自己的数据存放到哪里呢？

（1）组件对象也有一个data属性（也可以有methods属性）
（2）只是这个data属性必须是一个函数，这个函数返回一个对象，对象内部保存着数据

6.为什么组件的data必须是一个函数？

为了保证不同页面调用同一个组件时产生连锁反应，保证data返回的不是同一个对象

7.如何进行父子组件之间的通信？

（1）通过props由父组件向子组件传递数据
（2）通过$emit事件由子组件向父组件传递数据

8.Vue 响应式原理：

(1)将一个普通的javaScript对象作为data的选项传入vue实例;
(2)Vue将遍历此对象中的porperty,并使用Object.definePorperty 把porperty全部转为getter,setter;
(3)对于用户来说getter,setter是不可见的，但是在内部让vue能够追踪依赖，在porperty被访问和修改时通知变更；
(4)每一个组件实例都对应一个watcher实例，会在组件渲染的过程中，将接触过的数据porperty记为依赖，之后当依赖的setter触发时会通知watcher,使关联的组件重新渲染。

9.检测限制：

由于javaScript的限制，不能检测数组，对象的变化
（1）Vue无法检测porperty的移除、添加
原因：（由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的）
（2）Vue 不能检测以下数组的变动：
原因：
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
var vm = new Vue({
data: {
items: [‘a’, ‘b’, ‘c’]
}
})
解决第一类问题：vm.$set(vm.items, indexOfItem, newValue)
解决第二类问题：vm.items.splice(newLength)

10.异步更新队列

（1）Vue在更新Dom时是异步执行的，只要侦测到数据变化，就会开启一个队列，缓存到同一事件循环中发生的所有数据变更；
（2）如果同一个 watcher 被多次触发，只会被推入到队列中一次；
有时为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。