2 posts tagged with "vue"

View All Tags

$watch使用

triumph

triumph

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="Vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="title"></input>
<h1>{{title}}</h1>
<button @click="startListen">开始监听</button>
<button @click="stopListen">停止监听</button>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
title: 'hello',
isListen: false,
unWatch:null
},
methods: {
startListen() {
this.unWatch = this.$watch('title', (oldVal, newVal) => {
console.log(oldVal, newVal)
});
},
stopListen(){
this.unWatch();
}
}
});
</script>

Vue实例生命周期

triumph

triumph

Vue生命周期

Vue实例的生命周期

  • 生命周期:从实例创建、运行到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期. vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，
  • 生命周期钩子：就是生命周期事件的别名

主要的生命周期函数：

  • 被创建期间的生命周期函数:
    • beforeCreate()：实例在内存中被创建出来，此时，还没有初始化data和methods属性
    • created(): 实例已经在内存中创建完成，此时data和methods已经创建完成,此时还没有开始编译模板
    • beforeMount():此时已经完成了模板的编译,但是还没有挂载到页面中
    • mounted():此时，已经将编译好的模板，挂载到了页面指定的容器中显示
  • 运行期间的生命周期函数：
    • beforeUpdate(): 状态更新之前执行次函数，此时data中的状态是最新的，但是界面数据并未更新，因为此时还未重新渲染DOM节点
    • updated():实例更新完成后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新。界面也已经被重新渲染完成。
  • 销毁期间的生命周期函数：
    • beforeDestroy: 实例销毁之前调用，此时，实例仍然可以可用。
    • destroyed: Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会被解绑，事件监听器被全部移除，所有子实例也一样。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue生命周期</title>
</head>
<body>
<div id="app">
<h1 id="h1">{{msg}}</h1>
<button @click="msg='react'" >修改</button>
</div>
</body>
</html>
<script>
/*创建Vue实例，得到viewModel*/
const vm = new Vue({
el: "#app",
data: {
msg: "Vue"
},
methods: {
show() {
console.log('执行了show()');
}
},
beforeCreate() { //实例完全被创建出来之前，会执行它
console.log("实例被创建之前");
// this.show();
// console.log(this.msg);
// 在此阶段，data和methods()均未初始化
},
created() { //实例创建完成调用
console.log("实例被创建");
// console.log(this.msg);
// this.show();
//
},
beforeMount() {//此时，模板已经存在内存中编辑完成了。但是尚未把模板渲染到页面中
console.log("实例被挂载之前");
// const renderText = document.querySelector('h1').innerText;
// console.log(renderText);
//在此时，页面中的元素，还未真正被替换过来，只是之前写的一些模板字符串
},
mounted() {//此时，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
console.log("实例挂载完成");
// const renderText = document.querySelector('h1').innerText;
// console.log(renderText);
//此函数是 实例创建期间的最后一个生命周期函数，当执行完后，表明，实例已经被完全创建完成，如果无更新内容一直在内存中
},
beforeUpdate() {//此时页面还没被更新，数据已经更新
console.log("更新data");
// const renderPageText = document.querySelector('h1').innerText;
// console.log('页面内容:' + renderPageText);
// console.log('data中的数据' + this.msg);
},
updated() {
console.log("同步data和页面数据");
// const renderPageText = document.querySelector('h1').innerText;
// console.log('页面内容:' + renderPageText);
// console.log('data中的数据' + this.msg);
//此时页面和data数据已经保持同步啦
},
beforeDestroy() {
//console.log("执行销毁实例之前");
// const renderPageText = document.querySelector('h1').innerText;
// console.log('页面内容:' + renderPageText);
// console.log('data中的数据' + this.msg);
},
destroyed() {
//console.log("实例已经销毁");
},
});
</script>

此段来自

  • 常用的生命周期方法：create()/mounted():常用于发送Ajax请求启动定时器等异步任务，beforeDestory()：常用于做一些收尾工作，例如关闭定时器；
<body>
<div id="app">
<button @click= "destroyVm">点击我取消Vue实例</button>
<p v-show = "isShow">我是四川码酱</p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
isShow: true
},
beforeCreate() {
console.log("我是beforeCreate方法，我被执行了");
},
created() {
console.log("我是created方法，我被执行了");
},
beforeMount() {
console.log("我是beforeMount方法，我被执行了");
},
mounted(){ // 初始化显示之后立即调用，也是执行一次
this.intervalId = setInterval(() =>{
console.log("=====");
this.isShow = !this.isShow;
}, 1000)
},
beforeUpdate() {
console.log("我是beforeUpdate方法，我被执行了");
},
updated() {
console.log("我是updated方法，我被执行了");
},
beforeDestroy() { // 死亡之前回调一次
console.log("我是beforeDestroy方法，我要被销毁了");
// 清除定时器
clearInterval(this.intervalId)
},
destroyed() {
console.log("我是destroyed方法，我被执行了");
},
methods: {
destroyVm(){
this.$destroy();
}
}
})
</script>
</body>

Vue生命周期

关于Vue更多