生命 周期

生命周期的意义

• 允许使用者在程序的不同阶段，做不同的业务
• vue是采用组件开发模式来进行项目开发–在vue开发中，所有的功能等都是组件化（每一个组件可以想象成一个积木的模块），然后通过组件来进行业务拼凑（使用积木的模块来构建一个好看的实体）
• 可以更大化的实现代码的复用–提高项目开发效率，提升项目的可维护性
• 组件是一个功能高内聚（组件的特性都应该有，比如按钮，可以有点击效果，用户可点击，也可以不让用户点击的功能），业务低耦合（用户点击了按钮要做什么事情）的一个模块
  • 那么每一个组件都有被展示出来，然后可能又被销毁–如果把组件设计为一个实例，那么组件就有从创建到销毁的一个过程，那么这个过程就是生命周期

生命周期的阶段划分：

• 划分为四个阶段：创建，挂载，更新，卸载/销毁
• 每一个阶段都分为之前之后，共8个生命周期
  • beforeCreate(){} 创建前-----几乎不用，没有具体业务执行，所以vue3取消了这个生命周期；
  • created(){} 创建后 ----表示vue组件实例对象构造完成，也就是数据已经绑定到vm层上；一个重要的生命周期，数据已经完成初始化，但是没有完成实例挂载
  • beforeMount(){} 挂载之前 ----无用的生命周期
  • mounted(){} 挂载后—已经完成挂载，那么页面渲染已经完成，所以赋值会导致二次渲染
  • beforeUpdate(){} 更新前—更新是指页面更新，不是数据更新，但是数据更新会触发页面更新
    • 问：那么数据更新也就是会触发更新生命周期，对不对?
    • 不对，只有当数据绑定到dom节点以后，它的更新才会触发更新生命周期
  • updated(){} 更新后
  • beforeUnmount(){} 卸载前 ——vue3
  • unmounted(){} 卸载后——vue3
  • beforeDestroy(){} 卸载前——vue2—beforeDestroy生命周期很重要
  • destroy(){} 卸载后——vue2
  • 非常重要—created，mounted，beforeUnmount这三个生命周期
• 综上所诉：
  • 如果created中存在异步赋值，那么会导致二次渲染，原因：所有的生命周期都是异步代码，所以异步执行不会得到等待；created非异步赋值，不会造成二次渲染。
  • mounted会造成二次渲染，但是可以获取到dom元素；beforeUnmount常常用于销毁定时器等
  • 创建和挂载只有在初始化（组件实例化）的时候会执行一次，后边的所有数据更新，都只会触发更新生命周期
  • 常常使用销毁前或卸载前生命周期来取消定时器这样的业务
• 总结：生命周期是指虚拟dom的生命周期，created赋值不会二次渲染，mounted赋值会二次渲染

总结：

• 生命周期指虚拟dom从创建到卸载的过程中暴露出来的钩子函数
• 暴露钩子函数的好处是，可以让我们在组件的每一个阶段可以实现对组件的控制和操作，比如赋初始值使用的created生命周期，在页面初始化的时候获取dom元素的mounted生命周期
• 创建和挂载生命周期只会在组件初始化的时候执行一次，后边的所有操作都是更新生命周期
• 组件和子组件的生命周期顺序，是在父组件的mounted之前会去对子组件进行初始化和挂载（这里的挂载是子组件把它自己挂载到父组件上），最后再把所有的组件全部挂载到dom上

昨日回顾

• vue框架中提倡得组件化开发——她就是一个独立模块，数据，方法不可以直接相互使用
• 组件定义的时候，不是定义为一个实例（单例模式），组件定义为一个多例模式，所以定义组件的时候，是

总结：

• 生命周期----它是一个组件从创建到卸载的一个过程
  • created生命周期，赋值不会造成二次渲染
  • mounted会二次渲染，可以获取ref关联对象
  • beforeUnmount用于释放内存资源----定时器，大数据销毁，事件解绑
  • 更新生命周期一定是数据绑定到虚拟dom以后，它的更新才会触发
  • 面试：共四个阶段，每一个阶段都分成之前之后，创建，挂载，更新，卸载；在组件进行实例化的时候会触发两个生命周期，创建和挂载传值

组件传值

父子组件传值

• 父传子-----props属性绑定原理，子组件定义（可以定义数据类型，默认值，是否必传），父组件绑定传递
  • 在子组件定义一个props，然后父组件在子组件标签上绑定属性即可
  • （自我总结就是：父组件里包含子组件，子组件需要渲染数据，那么就是从父组件中拿数据到子组件，所以就是父传子）
    
    
    
  • 当子组件想要修改数据，正确的做法是：子组件上可以有一个自定义事件，绑定一个修改数据的回调方法.
• 子传父----== $emit ==利用事件原理，子组件定义一个自定义事件名字，在适当的时机触发这个自定义事件，父组件注册这个自定义事件并传递事件回调函数
• （自我理解就是：子组件中想操作某个事件，就是子传父）
  
  

实例传值

• $parent—获取父组件实例，然后进行父组件实例的方法和属性调用（子组件中操作父组件，拿父组件。子组件通过获取父组件的实例修改list数据）
  
• ref+$refs----获取子组件实例，关联对象来进行实例绑定数据和方法调用（父组件中操作子组件，拿子组件。父组件通过调用子组件的方法修改list数据）
  
  

watch观察属性

• 可以使用观察属性来监听数据的变化
• 函数监听是一个浅监听
• 可以使用deep属性来设置深监听
• 可以处理监听到数据变化后得业务
  

deep深度监听

• watch监听数组，需要用deep深度观察
  

computed计算属性

• 如果要计算得到一个数据，那么可以使用计算属性——computed 一直是深度监听
  • 定义一个getter方法----不需要使用get关键字
  • 当用来计算的数据发生变化的时候，会重新计算结果
    

总结：computed和watch的区别

computed是深度监听，所以性能损耗大于非深度监听的watch
watch只监听数据变化，然后去处理一个业务
computed会监听数据变化，并重新计算结果和缓存结果

跨组件（注入）传值：provide

• 在顶层组件中提供一些数据
• provide是一个属性，数据类型为对象，没有this
• 所以provide为对象的时候，只能传递固定参数
  
• provide提供数据
  • 对象写法只能传递固定数据，不能使用this对象
  • 函数形式