<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app" ref="app">
价格:
<div>{{ price }}</div>
个数:
<div>{{ nums }}</div>
金额:
<div>{{ totalNums }}</div>
<button @click="addClick">点击个数加一</button>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
props: {
showPage: {
type: Boolean,
default: false,
},
},
data: {
nums: 1,
price: 2,
},
beforeCreate() {
console.log('==beforeCreate创建前:==');
// 可以在这个钩子函数获取本地保存的数据如localStorage,sessionStorage
console.log(this.$el, '文档加载是否完成'); // undefined
console.log(this.$data, 'data数据加载是否完成'); // undefined
console.log('---文档和data数据都没完成---');
console.log('------');
},
watch: {
showPage: {
handler(newVal) {
console.log('==watch创建完成:== ');
console.log(this.$el, '文档加载是否完成'); // undefined
console.log(this.$data, 'data数据加载是否完成');
console.log('data数据创建好了,文档还没');
console.log('------');
if (!newVal) return;
this.getData();
},
immediate: true,
},
},
computed: {
totalNums: function () {
console.log('==computed创建完成:== ');
console.log(this.$el, '文档加载是否完成'); // undefined
console.log(this.$data, 'data数据加载是否完成');
console.log('文档和data数据创建好了');
return this.nums * this.price;
},
},
created() {
console.log('==created创建完成:==');
console.log(this.$el, '文档加载是否完成'); // undefined
console.log(this.$data, 'data数据加载是否完成');
console.log('data数据创建好了,文档还没');
console.log('------');
},
beforeMount() {
console.log('==beforeMount挂载前:==');
console.log(this.$el, '文档加载是否完成');
console.log(this.$data, 'data数据加载是否完成');
console.log(this.$refs.app, '小结:DOM创建完成,但是数据还没挂载DOM视图上'); //undefined;在这个钩子函数获取不到DOM元素
console.log('------');
},
mounted() {
console.log('==mounted挂载完成:==');
//可以在这个钩子函数里操作DOM元素了
console.log(this.$refs.app, '小结:DOM文档视图和数据已经可以联系了');
console.log('------');
},
beforeUpdate() {
//第一次打开页面时是不会触发该钩子函数的,组件更新了才会
console.log('==beforeUpdate即将更新渲染:==');
let name = this.$refs.app.innerHTML;
console.log('name:' + name);
console.log('------');
},
updated() {
//第一次打开页面时是不会触发该钩子函数的,组件更新了才会
console.log('==updated更新渲染成功:==');
let name = this.$refs.app.innerHTML;
console.log('name:' + name);
console.log('------');
},
/*beforeDestory(){
console.log("销毁前:");
},
destoryed(){
console.log("销毁完成:");
}*/
methods: {
addClick() {
this.nums += 1;
},
},
});
</script>
</html>
总结
vue的 data() { return { arrData:[] }}
在当前组件里面绑定的值arrData监听很深,尽管在视图遍历很多层下的数据,只要改变了,就会引起遍历的那个arrData数据改变,也会使data里面的arrData数据发生改变。从而使视图更新,
注意点
computed要能触发的话,
第一个
视图上必须使用到改监听的函数名称
第二个
建立的函数里面必须要精确的监听(使用)到数组或对象发生改变的那个值(第一点:改变的值一定要跟之前的值不一样,不然触发不了,第二点:该属性值必须是有get和set方法,不然触发不了,可以通过this.$set来使其变成有set和get方法),不然是无法触发函数进行逻辑操作返回处理的值。
一开始加载页面Vue生命周期及监听函数执行顺序
beforeCreate>watch>created>beforeMount>computed>mounted
watch执行时期数据data(this.$data)
已经加载好了
computed执行时期数据datathis.$data
和页面this.$el
都加载好了
computed在页面一加载就会触发
触发时间先后:如果computed里面使用了辅助函数mapState进行逻辑处理,那么时间早于onLoad和mounted,如果computed里面没有使用辅助函数mapState,那么时间慢于onLoad触发时间,早于mounted触发时间