vue3知识点3vue的生命周期和钩子函数、计算属性、侦听器

#vue3知识点3vue的生命周期和钩子函数、计算属性、侦听器

前言

本节知识点主要是生命周期那几个函数，计算属性和侦听器。

Vm

我们要搞清楚vue的实例对象是谁，vue3中创建vue实例时这个vm就是。然后再连接上视图层，vm.mount("#app")。

const vm = Vue.createApp({
   
			  data() {
   
			    return data
			  },
			
			})
vm.mount('#app')

而不是连写的，这样写这个vm不是实例对象。

const vm = Vue.createApp({
   }).mount('#app')

当把data绑定到vm实例对象上之后，也就是创建了vue实例之后，data的数据也就属于vm对象的了，vm也可以调用data里面的属性。Vm.msg=data.msg

// vm.msg=data.msg
	console.log(vm.msg,"----vm")//hello
	console.log(data.msg,"----data")//hello

注意：vm.msg在钩子函数里报错的话，改this，data 在哪用都可以。

this用于在vue实例里面调用data的数据 this.msg=data.msg

vue的函数中this指向的是vue实例，也就是vm,所以根据上述，this就可以调用data。

视图层
<h4>{
   {
   hello}}</h4>

数据层
data={
   
    msg:'hello'
}

vm实例
const vm=Vue.createApp({
   })
vm.mount('#app')

// vm.$data:等同于data对象
	console.log(vm.$data,"---$data")//{msg: "hello"}

生命周期钩子函数

在我们创建完vue实例对象后，会执行这几个函数。它们的位置和data平级。

生命周期定义：

浅显说法：data里的变量在什么情况下开始存在，在什么情况下会被从内存删除，失效。

或者做项目时data不是写死的，而是从服务器传过来的。

如果需要从服务器端（数据库）得到数据返回msg的值给前端，所以需要知道什么时候从服务器获取数据：

比如：要在程序刚运行的时候就要获取数据，其实是从Vue框架刚刚建立的时候需要获取数据，即create vue的时候,要写在created里面。

初始化函数created 和mounted

都是在vue框架的实例对象刚刚初始化的时候就执行 ，在实例创建完成之后立即调用。

created

数据层（data)已经和vue实例对象绑定，与视图