内存
image.png
- 习惯的把 Vue 实例命名为 vm
- vm 对象封装了对视图的操作，包括对数据的读写、事件绑定、DOM 更新
- vm 的构造函数是 Vue
- options 是 new Vue 的参数，一般称为选项或者构造函数
options
optiosn 的五类属性
- 数据： data 、 props 、 propsData 、 computed 、 methods 、 watch
- DOM ：el 、template 、render 、 renderError
- 生命周期钩子：beforeCreate 、 created 、 beforeMount 、 mounted 、
beforeUpdate 、 updated 、 actived 、 deactivated 、 beforeDestory 、
destroyed 、 errorCaptured - 资源： directives 、 filters 、 components
- 组合： parent 、 mixins 、 extends 、 provide 、 inject
- 其他
入门属性
el 挂载点
- $mount 有替换关系
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App),
})
// 与以下代码效果一致
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
data 内部关系
- 支持对象和函数，优先用函数
<template>
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data(){
return {
n: 0
}
},
}
</script>
methods 方法
- 事件处理函数或者是普通函数
<template>
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data(){
return {
n: 0
}
},
methods: {
add() {
this.n += 1;
}
}
}
</script>
components
- 使用 vue 组件、注意大小写
1 全局注册
Vue.component('Demo', {
template: `
<div>demo</div>
`
})
2 局部组件
new Vue({
components: {
Demo: {
template: `
<div>demo</div>
`
}
}
})
3 导入
<template><Demo/></template>
<script>
import Demo from './Demo.vue';
export default{
components: {
Demo
}
}
</script>
四个钩子
- created 实例出现在内存中
- mounted 实例出现在页面中
- updated 实例更新了
- destroyed 实例消亡了
props 外部属性
<template><Demo msg="这是传递给子组件的"/></template>
<script>
import Demo from './Demo.vue';
export default{
components: {
Demo
}
}
</script>
<template><div>{{msg}}</div></template>
<script>
export default{
props: ['msg']
}
</script>
props 可以传递一个方法给子组件
data
n 的值
image.png
点击后会获取到 n 的值
image.png
Object.defineProperty
const obj = {};
function createObserve(obj, property, value) {
Object.defineProperty(obj, property, {
get() {
console.log("获取value", value);
return value;
},
set(val) {
value = val;
}
});
}
createObserve(obj, 'name', "wt");
obj.name;
obj.name = 'wto';
obj.name;
此时打印 obj 与之前 vue 中的 n 类似
image.png
- 可以给对象添加属性
- 可以对对象属性添加 getter / setter
- getter / setter用于对属性的读写进行监控
vm = new Vue({data: myData})
- 会让 vm 成为 myData 的代理（ proxy ）
- 对 myData 的所有属性进行监控
- 当监听到 myData 的属性变化了，就可以调用render
数据响应式
什么是响应式
Vue 的 data 是响应式
- const vm = new Vue({data: {n: 0}})
- 如果修改 vm.n ,那么 UI 中的 n 就会响应修改操作
- Vue2 通过 Object.defineProperty 来实现数据响应式
响应式网页
- 修改窗口大小，网页内容会做出响应，那就是响应式页面
Vue 的数据响应问题
n 未定义
<template>
<div>{{n}}</div>
</template>
<script>
export default{
data(){
}
}
</script>
- 在 data 中未定义 n ，却在 template 中使用 n
- 会导致警告
定义了对象 obj ，但是未定义 obj 的对应属性
<template>
<div>{{obj.n}}
<button @click="reset">click</button>
</div>
</template>
<script>
export default{
data(){
return {
obj:{
}
}
},
methods: {
reset(){
this.obj.n = 1;
}
}
}
</script>
- 点击按钮后，依然不会出现 n
解决方法
- 提前声明 n
- 通过 set 方法
Vue.set(n)
// 或者
this.$set(n)
会自动创建 Object.defineProperty ,实现监听
data 中有数组
无法提前声明
- Vue 不能检测到你新增了下标
- 通过 Vue.set 或者 this.$set
Vue 数组方法的处理
- 篡改了数组 API
- push 、 pop 、 shift 、 unshift 、 splice 、 sort 、 reverse
