[JavaScript知识库]【vue】— vue实例分析 20220107

1. 实例化vue

console.log(app === vue)

理解：Vue和app之间是父子关系，就是一个Vue对象可以多个对象实例。

console.log(app instanceof Vue)

app是Vue实例化的对象，app是Vue对象的实例。

?

2.vue身上的属性和方法

• $开头的都可能是vue实例身上的，可以是属性，也可以是方法。

• 下划线开头的是私有属性和方法。

app是Vue实例化对象，也就是Vue的实例。是一个对象里面包含属性和方法。

1. $el，视图层，元素挂载。注意：el上面不能挂载body和html，会报错的。

2. $data使用返回的是一个对象的方式，向组件中的data格式一样。$data是一个observer对象，observe完成对象响应，observe用来异步观察对象的变化，变化后会触发一个回调函数。

3. 注意：observe只能检测已有的数据变化，后加书简监听不到，意味着不能完成数据的响应式。解决方式：在data中定义一个空变量，后面再赋值。

4. app.message app.message 假设在data里面定义了一个变量message，app可以越过data，直接拿到data里面的数据，因为data里面的数据挂载到Vue中app实例上去了，Vue实例app不光代理了data，还代理methods等东西，目的：方便拿数据，便于数据监听。

3.option

1. el 挂载元素

2. data 数据

3. methods 方法

4. computed 计算属性

5. watch 侦听器

6. 生命周期函数

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy

• destroyed

1. filters 过滤器

2. components 组件

?