(原创)此文章是本人初步理解关于Vue的MVVM模式、父子组件通信、生命周期、计算属性、方法及侦听器的记录笔记。
MVVM模式
- m(模型层)v(视图层)p(控制器)
- m(模型层)v(视图层)vm(ViewModel)
- 与mvp区别,没有p层
- 方便操作数据
- 重点在模型层
- 面向数据进行开发
- 关于ViewModel
- 虚拟DOM
- object.defineproperties()
前端组件化思维及通信
- 父组件向子组件传值
// 父组件
<template>
...
<todo-item :content="item" v-for="(item,index) in list" :key="index"></todo-item>
...
</template>
<script>
import TodoItem from './comps/TodoItem'
...
components: {
TodoItem,
},
data () {
return {
todoValue: '',
list: []
}
},
methods: {
handleBtnClick() {
this.list.push(this.todoValue)
this.todoValue = ''
}
}
}
</script>
// 子组件
<template>
<li>{{content}}</li>
</template>
<script>
export default {
name:'TodoItem',
props: ["content"]
}
</script>
- 子组件向父组件传值
// 父组件
<template>
....
<todo-item :content="item"
:index = "index"
v-for="(item,index) in list"
:key="index"
@delete="handleItemDelete">
</todo-item>
...
</template>
<script>
import TodoItem from './comps/TodoItem'
export default {
name: 'app',
components: {
TodoItem,
},
data () {
return {
todoValue: '',
list: []
}
},
methods: {
....
handleItemDelete(index) {
console.log(index)
this.list.splice(index, 1)
}
}
}
</script>
<template>
<li @click="handleItemClick">{{content}}</li>
</template>
<script>
export default {
name:'TodoItem',
props: ["content", 'index'],
methods: {
handleItemClick () {
this.$emit("delete", this.index) // 子向父
}
}
}
</script>
模板语法
- 插值表达式
- v-html(识别html片段),指令
- v-text
- 等其他v-(= js表达式)指令
计算属性,方法,侦听器
- 计算属性
<template>
<div>
{{fullName}}{{age}}
</div>
</template>
<script>
export default {
data() {
return {
firstName: "Guo",
lastName: "Han",
age: 28
};
},
// 计算属性,内置缓存
computed: {
fullName() {
console.log("计算了一次");
return this.firstName + this.lastName;
}
}
};
</script>
- 缓存机制
若依赖值未发生改变,则不会重新计算
<template>
<div>
{{fullName}}{{age}}
</div>
</template>
<script>
export default {
data() {
return {
firstName: "Guo",
lastName: "Han",
age: 28
};
},
// 计算属性,内置缓存
computed: {
fullName() {
console.log("计算了一次");
return this.firstName + this.lastName;
}
}
};
</script>
- 方法
缺点:无缓存机制,性能低
<template>
<div>{{fullName}}{{age}}</div>
</template>
<script>
export default {
data() {
return {
firstName: "Guo",
lastName: "Han",
age: 28,
fullName: ""
};
},
// 侦听器
watch: {
firstName() {
console.log("计算了一次");
this.fullName = this.firstName + this.lastName;
},
lastName() {
console.log("计算了一次");
this.fullName = this.firstName + this.lastName;
}
}
};
</script>
- 侦听器
- 不相关内容发生改变,不会触发
- 监听内容改变,会触发
<template>
<div>{{fullName}}{{age}}</div>
</template>
<script>
export default {
data() {
return {
firstName: "Guo",
lastName: "Han",
age: 28,
fullName: ""
};
},
// 侦听器
watch: {
firstName() {
console.log("计算了一次");
this.fullName = this.firstName + this.lastName;
},
lastName() {
console.log("计算了一次");
this.fullName = this.firstName + this.lastName;
}
}
};
</script>
- 计算属性的setter和getter
<template>
<div>
{{fullName}}{{age}}
</div>
</template>
<script>
export default {
data() {
return {
firstName: "Guo",
lastName: "Han",
age: 28
};
},
computed: {
fullName: {
get() {
return this.firstName + this.lastName;
},
set(value) {
const arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
};
</script>