内存图
- 把 Vue 实例命名为 vm 是尤雨溪的习惯，我们应该沿用
- vm 对象
封装了对视图的所有操作，包括数据读写、时间绑定、DOM更新
- vm 的
构造函数是 Vue，按照 ES6 的说法，vm 所属的类是 Vue
- options 是 new Vue 的参数，一般称之为
选项或构造选项
options 里面有什么
文档
options 的五类属性
- 数据：data、props、propsData、computed、methods、watch
- DOM：el、template、render、renderError
- 生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured
- 资源：directives、filters、components
- 组合：parent、mixins、extends、provide、inject
- 其他：用的很少
方法和函数的区别
常用，必会属性
- data、props、methods、el、created、mounted、updated、destroyed、components
高级属性
- computed、watch、activated、deactivated、directives、mixins、extends、provide、inject
不常用，用时再翻文档
- propsData、render、errorCaptured、parent
特殊属性
入门属性
el - 挂载点
new Vue({
el: '#App'
render: h=>h(Demo)
})
new Vue({
render: h=>h(Demo)
}).$mount('#App')
data - 内部数据 (有BUG)
new Vue({
data(){
return {
n:0
}
}
}).$mount('#App')
methods - 方法
new Vue({
data(){
return {
n:0
}
},
methods: {
add(){
this.n += 1
}
}
}).$mount('#App')
components
- 使用 Vue 组件，注意大小写
- 文件名小写, 组件大写 (推荐)
import Demo from './Demo.vue'
new Vue({
components: {Demo},
template: `
<Demo />
`
}).$mount('#App')
Vue.component('Demo2',{
template: `
<div>demo2</div>
`
})
四个钩子
- created - 实例出现在内存中
- mounted - 实例出现在页面中
- updated - 实例更新了
- destroyed - 实例消亡了
props - 外部属性
进阶属性
computed - 计算属性
watch - 侦听
- 一旦 data 变化，就执行的函数
- options.watch 用法
- this.$watch 用法
- deep, immediate 含义
directives - 指令
- 内置指令 v-if / v-for / v-bind / v-on
- 自定义指令，如 v-focus
- 指令是为了减少重复的 DOM 操作
mixin - 混入
- 重复三次之后的出路
- 混入 v.s. 全局混入
- 选项自动合并
- 混入就是为了减少重复的构造选项
extends - 继承
- 先了解一下 Vue.extend
- 你觉得用了 mixin 还是重复
- 于是自己写了一个 View，它继承 Vue
- 你还可以预先定义其他构造选项
- 继承就是为了减少重复的构造选项
provide / inject
computed - 计算属性
用途
缓存
- 如果依赖的属性没有变化，就不会重新计算
- getter/setter 默认不会缓存，Vue 做了特殊处理
例子
import Vue from 'vue/dist/vue.js'
Vue.config.productionTip = false;
new Vue({
data: {
uesr: {
email: "123@qq.com"
nickname: "ivan"
phone: "12345678123"
},
},
computed: {
displayName: {
get(){
const user = this.user;
return user.nickname || user.email || user.phone;
},
set(value){
this.user.nickname = value;
}
}
},
template: `
<div>
{{displayName}}
<div>
{{displayName}}
<button>set</button>
</div>
</div>
`,
method: {
add(): {
this.displayName = "chen"
}
}
})
例子二
import Vue from "vue/dist/vue.js";
Vue.config.productionTip = false;
let id = 0;
const createUser = (name, gender) => {
id += 1;
return { id: id, name: name, gender: gender };
};
new Vue({
data() {
return {
users: [
createUser("方方", "男"),
createUser("圆圆", "女"),
createUser("小新", "男"),
createUser("小葵", "女")
],
displayUsers: []
};
},
created() {
this.displayUsers = this.users;
},
methods: {
showMale() {
this.displayUsers = this.users.filter(u => u.gender === "男");
},
showFemale() {
this.displayUsers = this.users.filter(u => u.gender === "女");
},
showAll() {
this.displayUsers = this.users;
}
},
template: `
<div>
<div>
<button @click="showAll">全部</button>
<button @click="showMale">男</button>
<button @click="showFemale">女</button></div>
<ul>
<li v-for="(u,index) in displayUsers" :key="index">{{u.name}} - {{u.gender}}</li>
</ul>
</div>
`
}).$mount("#app");
watch - 侦听
用途
deep: true
- 如果 object.a 变了，那么 object 算不算也变了？
- 如果你需要的答案是 变了 ，那么就用 deep: true
- 如果你需要的答案是 没变 ，那么就用 deep: false
- deep 的意思是，监听 object 的时候是否往深了看
语法1
watch: {
o1: function(value, oldValue){},
o2(){},
o3: [f1, f2],
o4: 'methodName',
o5: {handler: fn, deep:true, immediate: true},
o6: {handler: fn, deep:true, immediate:true},
'object.a': function(){}
}
语法2
vm.$watch('xxx', fn, {deep: .., immediate: ..})
computed 和 watch 的区别
computed 就是计算属性的意思
- computed是用来计算出一个值得
- 这个值在调用的时候不需要加括号
- 根据依赖会提供缓存，依赖不变就不会重新计算
watch 就是监听的意思
- immediate 选项，表示是否第一次渲染，第一次渲染要执行函数
- deep 选项，如果监听一个对象，看是否要监听里面的对象的变化
