Vue组件生命周期其他属性

最新推荐文章于 2023-06-20 09:21:56 发布

FIND方式

最新推荐文章于 2023-06-20 09:21:56 发布

阅读量143

点赞数

分类专栏： vue

原文链接：https://www.jianshu.com/p/8b7373362b4c

版权

笔试同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

文章目录

1. 生命周期

初始化create、挂载mount、修改update、卸载destroy

组件初始化之前 beforeCreate(){} 组件初始化完成 created(){}
created通常是在模板渲染成HTML之前调用，即通常初始化某些属性值，然后再渲染成视图。
在这2个生命周期之间进行初始化事件，进行数据观测，可以看到在created的时候数据已经和data属性进行绑定，此时el还不存在。
在created和beforeMount钩子函数之间判断有无 el选项>render函数选项 > template选项 > outer HTML
组件挂载之前 beforeMount(){} 组件挂载完成 mounted(){}
在这个生命周期之间给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。
mounted之后可以看到虚拟DOM变成了内容，例如{{message}}数据挂载上去。
组件修改之前 beforeUpdate(){} 组件修改完成 updated(){}
vue发现data中的数据发生了改变，会触发对应组件的重新渲染
组件卸载之前 beforeDesroy(){} 组件卸载完成 destroyed(){}
beforeDestroy钩子函数在实例销毁之前调用，在这一步，实例仍然完全可用；
destroyed钩子函数在Vue 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁；

<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    beforeCreate: function() {
      console.group('------beforeCreate组件创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) //undefined
    },
    created: function() {
      console.group('------created组件创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 ***
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化***
    },
    beforeMount: function() {
      console.group('------beforeMount组件挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化***
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);   
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message)
    }
  })
</script>
</html>

在这里插入图片描述

2. 其他属性

watch和computed区别

wacth监听属性：监听值发生改变时触发函数，例如当前页码改变时获取数据
computed计算属性：基于依赖缓存，依赖没有改变返回缓存，依赖改变重新计算返回

export default{
name:"nameinfo",
methods:{},
data() {
	return {};
		}
};
watch: {
//watch 监听属性或者是watch监听组件上的数据变化
//watch 监听里面写的监听方法和，变量同名，同名才能监听到变量的变化
    msg(afterValue, beforeValue) {
      console.log(afterValue, beforeValue);
    }
  },
computed: {
    //计算属性
    //computed  里面可以写复杂的逻辑
    getData() {
    	console.log("计算属性里面的方法");
    },
     //里面也可以写  getter  setter
    getData: {
      get() {//getter
        return this.num1 * this.num2;
      },
      set(newValue) {//setter
        this.num1 = newValue;
        this.num2 = newValue / 10;
      }
    },
    changeStatus() {
      console.log("在事件执行的方法里面调用");
    }