谁做彩票网站代理建网站的公司排名
生命周期
简介
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
beforeCreate
实例初始化之后，数据观测、数据代理、事件配置之前被调用。
此时：无法通过 vm 访问到data、computed、methods上的方法和数据
案例
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content:'<button onclick="alert(1)">test</button>'},beforeCreate() {console.log('生命周期：beforeCreate')console.log(this)debugger},computed: {},methods: { say(){console.log("hello vue")}},filters: {},});</script>
</html>- 效果
created
实例初始化后立即调用，数据观测、数据代理、事件配置已完成。
此时：可以通过 vm 访问到data、computed、methods上的方法和数据
案例
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content:'<button onclick="alert(1)">test</button>'},beforeCreate() {console.log('生命周期：beforeCreate')console.log(this)debugger},created() {console.log('生命周期：created')console.log(this)debugger},computed: {},methods: { say(){console.log("hello vue")}},filters: {},});</script>
</html>- 效果
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。这一步中，模板编译/挂载尚未开始
此时：
- 页面呈现的是 未经Vue编译 的DOM结构
- 所有对DOM的操作，最终 不生效
案例
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>插值语法：{{name}}</h2><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content:'<button onclick="alert(1)">test</button>'},beforeCreate() {console.log('生命周期：beforeCreate')console.log(this)// debugger},created() {console.log('生命周期：created')console.log(this)// debugger},beforeMount() {console.log('生命周期：beforeMount')console.log(this)debugger},computed: {},methods: { say(){console.log("hello vue")}},filters: {},});</script>
</html>- 效果
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
此时：
- 页面呈现的是 经过Vue编译 的DOM结构
- 所有对DOM的操作，均生效，至此初始化过程结束；
- 一般此时进行：开启定时器、发送网络请求等初始化操作
案例
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>插值语法：{{name}}</h2><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content:'<button onclick="alert(1)">test</button>'},beforeCreate() {console.log('生命周期：beforeCreate')console.log(this)// debugger},created() {console.log('生命周期：created')console.log(this)// debugger},beforeMount() {console.log('生命周期：beforeMount')console.log(this)// debugger},mounted() {console.log('生命周期：mounted')console.log(this)debugger},computed: {},methods: { say(){console.log("hello vue")}},filters: {},});</script>
</html>- 效果
beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。
此时：数据是新的，页面是旧的，还没重新渲染
（页面尚未和数据保持同步）
案例
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span><h2>插值语法：{{name}}</h2><button @click="changeName">改变名称</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content: '<button onclick="alert(1)">test</button>',},beforeCreate() {console.log("生命周期：beforeCreate");console.log(this);// debugger},created() {console.log("生命周期：created");console.log(this);// debugger},beforeMount() {console.log("生命周期：beforeMount");console.log(this);// debugger},mounted() {console.log("生命周期：mounted");console.log(this);console.log("当前名称：" + this.name);// debugger},beforeUpdate() {console.log("生命周期：beforeUpdate");console.log(this.name);debugger;},computed: {},methods: {say() {console.log("hello vue");},changeName() {console.log("执行修改名称方法了...");this.name = this.name + "-" + Math.ceil(Math.random() * 10);console.log("修改名称为：" + this.name);},},filters: {},});</script>
</html>- 效果
updated
数据更新时调用，发生在重新渲染之后。
此时：数据是新的，页面是新的，已经重新渲染
（页面和数据保持同步）
案例
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span><h2>插值语法：{{name}}</h2><button @click="changeName">改变名称</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content: '<button onclick="alert(1)">test</button>',},beforeCreate() {console.log("生命周期：beforeCreate");console.log(this);// debugger},created() {console.log("生命周期：created");console.log(this);// debugger},beforeMount() {console.log("生命周期：beforeMount");console.log(this);// debugger},mounted() {console.log("生命周期：mounted");console.log(this);console.log("当前名称：" + this.name);// debugger},beforeUpdate() {console.log("生命周期：beforeUpdate");console.log(this.name);// debugger;},updated() {console.log("生命周期：updated");console.log(this.name);debugger;},computed: {},methods: {say() {console.log("hello vue");},changeName() {console.log("执行修改名称方法了...");this.name = this.name + "-" + Math.ceil(Math.random() * 10);console.log("修改名称为：" + this.name);},},filters: {},});</script>
</html>- 效果
beforeDestroy
实例销毁之前调用。
此时：vm种所有的东西均可用，即将执行销毁过程。
所有对数据的更新，均不回走更新流程了。
一般此时进行：关闭定时器、取消订阅消息等操作
案例
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span><h2>插值语法：{{name}}</h2><button @click="changeName">改变名称</button><h2>销毁</h2><button @click="destoyVm">销毁</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content: '<button onclick="alert(1)">test</button>',},beforeCreate() {console.log("生命周期：beforeCreate");console.log(this);// debugger},created() {console.log("生命周期：created");console.log(this);// debugger},beforeMount() {console.log("生命周期：beforeMount");console.log(this);// debugger},mounted() {console.log("生命周期：mounted");console.log(this);console.log("当前名称：" + this.name);// debugger},beforeUpdate() {console.log("生命周期：beforeUpdate");console.log(this.name);// debugger;},updated() {console.log("生命周期：updated");console.log(this.name);// debugger;},beforeDestroy(){console.log("生命周期：beforeDestory");console.log(this.name);debugger;},// destroyed() {// console.log("生命周期：destroyed");// console.log(this.name);// debugger;// },computed: {},methods: {say() {console.log("hello vue");},changeName() {console.log("执行修改名称方法了...");this.name = this.name + "-" + Math.ceil(Math.random() * 10);console.log("修改名称为：" + this.name);},destoyVm(){console.log("销毁vm方法了...");this.$destroy()}},filters: {},});</script>
</html>- 效果
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，> 所有的事件监听器会被移除，所有的子实例也会被销毁。
此时： vm实例都没有了
案例
- 代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>生命周期</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style></head><body><div id="root"><h1>生命周期</h1><div><h2>v-text</h2><span v-text="content"></span><h2>v-html</h2><span v-html="content"></span><h2>插值语法：{{name}}</h2><button @click="changeName">改变名称</button><h2>销毁</h2><button @click="destoyVm">销毁</button></div></div></body><script type="text/javascript">Vue.config.productionTip = false; // 阻止vue在启动是生成生产提示Vue.filter("globalStr", function (value) {console.log(" global filter splice time (时分秒)... ");return value.split(" ")[1];});const vm = new Vue({el: "#root",data: {name: "Vue 扛把子",content: '<button onclick="alert(1)">test</button>',},beforeCreate() {console.log("生命周期：beforeCreate");console.log(this);// debugger},created() {console.log("生命周期：created");console.log(this);// debugger},beforeMount() {console.log("生命周期：beforeMount");console.log(this);// debugger},mounted() {console.log("生命周期：mounted");console.log(this);console.log("当前名称：" + this.name);// debugger},beforeUpdate() {console.log("生命周期：beforeUpdate");console.log(this.name);// debugger;},updated() {console.log("生命周期：updated");console.log(this.name);// debugger;},beforeDestroy(){console.log("生命周期：beforeDestory");console.log(this.name);// debugger;},destroyed() {console.log("生命周期：destroyed");},computed: {},methods: {say() {console.log("hello vue");},changeName() {console.log("执行修改名称方法了...");this.name = this.name + "-" + Math.ceil(Math.random() * 10);console.log("修改名称为：" + this.name);},destoyVm(){console.log("销毁vm方法了...");this.$destroy()}},filters: {},});</script>
</html>- 效果
常用
- mounted ：初始化操作
- 发送请求
- 启动定时器
- 绑定自定义事件
- 订阅消息
- beforeDestroy：收尾操作
- 清除定时器
- 解绑自定事件
- 取消订阅