vue 组件数据加载解析顺序的详细代码
更新时间：2024年03月01日 09:39:23 作者：英俊潇洒美少年
Vue.js的解析顺序可以概括为:模板编译、组件创建、数据渲染、事件处理和生命周期钩子函数执行,接下来通过本文给大家介绍vue 组件数据加载解析顺序的完整代码,感兴趣的朋友跟随小编一起看看吧
组件数据加载解析顺序
实例初始化完成、props 解析 -> beforeCreate -> 响应式数据、计算属性、方法和侦听器设置完成 -> created -> 判断是否有渲染模版 -> beforeMount -> 组件挂载 -> mounted
- created之前，响应式数据、计算属性、方法和侦听器设置完成，但是方法、计算属性并不会执行，没有immediate: true的侦听器也不会执行；
- 只有用到计算属性时，才会去执行计算属性的方法
- 组件内外部使用push，$set，不修改原数组对象，会使得watch中的newValue等于oldValue，JSON.stringify(newValue) === JSON.stringify(oldValue)
- watch加了immediate: true，先执行响应式数据初始化，立即触发watch后，走到created生命周期。
- 侦听器依次设置时，immediate: true的立即执行，执行后再继续设置其他的侦听器，也就是说，当immediate立即执行的监听，当某些数据变更后，如果侦听器还没有设置，就不会执行
- 没有immediate: true,的watch，触发时机是晚于created、mounted的，当数据再次发生变化后，beforeUpdate之前执行；
- watch加了immediate: true，可以监听到响应式数据初始化后的变化。
- 不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
import Vue from "vue";
new Vue({
el: "#app",
template: `<div>
<div>{{computedCount}}</div>
</div>`,
data() {
return {
count: 1,
}
},
watch: {
count: {
handler() {
console.log('watch');
},
immediate: true,
}
},
computed: {
computedCount() {
console.log('computed');
return this.count + 1;
}
},
created() {
console.log('created');
},
mounted() {
console.log('mounted');
},
});
watch -> created -> computed -> mounted
new Vue({
el: "#app",
template: `<div>
<div></div>
</div>`,
data() {
return {
count: 1,
}
},
watch: {
count: {
handler() {
console.log('watch');
},
immediate: true,
}
},
computed: {
computedCount() {
console.log('computed');
return this.count + 1;
}
},
created() {
console.log('created');
},
mounted() {
console.log('mounted');
},
});
watch -> created -> mounted
new Vue({
el: "#app",
template: `<div>
<div></div>
</div>`,
data() {
return {
count: 1,
}
},
watch: {
count: {
handler() {
console.log('watch');
},
immediate: true,
}
},
computed: {
computedCount() {
console.log('computed');
return this.count + 1;
}
},
created() {
console.log('created');
},
mounted() {
console.log('mounted');
this.computedCount
},
});
watch -> created -> mounted -> computed到此这篇关于vue 组件数据加载解析顺序的文章就介绍到这了,更多相关vue 组件数据加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在Vue实例中,data属性是用户定义的用于存储数据的对象,而_data是Vue内部用于存储数据的对象,本文主要介绍了浅谈vue中的data与_data的关系是什么,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了Vue Steam同款登录验证数字输入框功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
可能很多小伙伴之前都了解过 Vue2实现响应式的核心是利用了ES5的Object.defineProperty 但是面对面试官时如果只知道一些模糊的概念。只有深入底层了解响应式的原理，才能在关键时刻对答如流,本文就来和大家详细聊聊，感兴趣的可以收藏一下2022-12-12
Vue中 Runtime + Compiler 和 Runtime-o
这篇文章主要介绍了Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别,结合实例形式详细分析了Vue中 Runtime + Compiler 和 Runtime-only 两种模式基本功能、原理、区别与相关注意事项,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue props 一次传多个值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue子路由跳转实现tab选项卡，完成一个简单的tab选项卡布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
本文主要介绍了elementUI中MENU菜单踩坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了解决vue+elementui项目打包后样式变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue创建项目卡住不动,vue create project卡住不动的解决
这篇文章主要介绍了vue创建项目卡住不动,vue create project卡住不动的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论