vue 生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

生命周期图示：
image

1. beforeCreate：

vue实例中的el，data，data中的message都为undefined

2. created：

el还是undefined，而数据已经与data中的属性进行绑定（放在data中属性当值发生改变的同时，视图也会发生变化），在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

从created到beforeMount的过程中，

  • 首先会判断vue实例中有没有el选项，如果有的话则进行下面的编译，但是如果没有el选项，则停止生命周期，直到vue实例上调用vm.$mount(el)。
  • 如果有el，再判断是否有template参数，如果有，则把其当作模板编译成render函数，如果没有，则把外部的html作为模板编译。template中的模板优先级高于outer HTML模板。
  • 在vue对象中还有一个render函数，它是以createElement作为参数，然后做渲染操作，而且我们可以直接嵌入JSX.
  • 综合排名优先级：render函数选项 > template选项 > outer HTML.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>my-project</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

在vue配置项中修改的
template: "<h1>{{message +'这是在template中的'}}</h1>",
render: function(createElement) {
return createElement('h1', 'this is createElement')
},

如果要在created阶段中进行dom操作，就要将操作都放在 Vue.nextTick() 的回调函数中，因为created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。

Vue.nextTick( [callback, context] )：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

Vue.nextTick(() => {
callback
})

3. beforeMount：

载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4. mounted：

载入后html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去

5. beforeUpdate：

更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染

只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发

6. updated：

数据已经更改完成，dom也重新render完成

7. beforeDestroy：

销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)

8. destroyed：

销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件

生命周期总结

  • beforecreate : 可以在这加个loading事件
  • created ：在这结束loading，还做一些初始数据的获取，实现函数自执行
  • mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
  • beforeDestroy： 你确认删除XX吗？
  • destroyed ：当前组件已被删除，清空相关内容

常用的几个属性

  • el属性 ：用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
  • data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
  • template属性：用来设置模板，会替换页面元素，包括占位符。
  • methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中
  • render属性：创建真正的Virtual Dom
  • computed属性：用来计算属性
  • watch属性：watch:function(new,old){}，监听data中数据的变化，两个参数，一个返回新值，一个返回旧值
  • computed计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新.
  • watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据.
  • methods每当触发重新渲染时，方法的调用方式将总是再次执行函数。因此，函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。
  • 如果我们有一个计算属性，那么Vue会记住计算的属性所依赖的值（在我们这个示例中，那就是results）。通过这样做，Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。这也意味着只要results还没有发生改变，多次访问totalMark计算属性会立即返回之前的计算结果，而不必再次执行函数。在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。
# 前端
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign