vue：基础：生命周期

1、vue 的生命周期【8个，作用：更好的实现逻辑】

【创建前后、加载前后、更新前后、销毁前后】

beforeCreated：在实例初始化之后，当前阶段 data、methods、watch、computed 都不能被访问。created：实例创建之后，这里没有 el, 如果非要访问 DOM，可以使用 vm.nextTick。beforeMount：挂载前，render 首次调用。Mounted：挂载之后，真实的 DOM 挂载完毕，完成数据双向绑定，可以访问 DOM 节点。beforeUpdate：数据更新时调用，完成虚拟DOM 重新渲染和打补丁（patch），在钩子函数中进一步改变状态，不会重新渲染。Updated：当前阶段DOM 更新完成。注意在些期间不要更新数据，会出现循环更新，该钩子在服务渲染之前不会被调用。beforeDistory：实例还是可以用的，可以在这里清除定时器。Distoryed：vue 实例完全销毁。所有的东西解绑，事件监听移除，左右的子实例也会被销毁，钩子在服务器渲染不被调用。actived：keep-alive 专属，组件激活被调用。deactived：keep-alive 专属，组件销毁被调用。

2、vue父子组件生命周期的执行顺序

加载过程：父 beforeCreate父 created父 beforeMount子 breaforeCreate子 created子 breforeMount子 mounted父 mounted更新过程：父 breforeUpdate子 breforeUpdate子 updated父 updated销毁过程父 beforeDestroy子 beforeDestroy子 destroyed父 destroyed

3、vue 第一次加载会触发哪些钩子？

正常情况下按顺序加载。

（1）有 el 加载前两个：创建前/后。

（2）没有 el 加载前四个：创建前/后、加载前/后。

（3）创建前/后、加载前/后这四个方法是一次性的，只执行一次。

（5）DOM 渲染在 Mounted 中就完成了。

4、computed、watch、methods 有什么区别？

（1）computed 不能支持异步，methods 和 watch 可以支持异步。

（2）data 是数据属性，用来存放数据；

computed 是计算属性，用于数据计算；初始化后自动更新；有缓存, 有 getter 和 setter 属性。

methods 调用才会执行，不会同步数据。

（3）computed 适合处理：多个数据影响一个数据【多对一】

watch适合处理：一个数据影响多个数据【一对多】

场景：watch 可以在 2S 后更改数据，computed 不能实现，因为不能异步操作。

注）计算属性不能直接修改。

5、created 和 mounted 有什么区别？

两者都只加载一次。created 是 DOM 没加载完。 mounted 时DOM 加载完了。

6、异步请求在哪一步发起？

created、beforeMount、mounted 中进行异步请求。

7、不需要依赖 DOM 在 Created 中加载，为什么？

快速获取到服务端，减少 loading；ssr 不支持 beforeMount、mounted 钩子函数。

8、为什么接口放在created 中调用？

created 是发生在 mounted 之前。能在mounted 之前拿到this。在created 时template 还没有被渲染成html,但是能够拿到props 和 data。

9、怎么清除定时器？

data 中 this.a = setTimeout ，distoryed 中 clearTimeout(this.a)

10、vue 中的 data 是个函数？

（1）为了保证利用性和独立性。

（2）组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变

注）vue 中的 data 是一个浅拷贝

11、vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗?

不会，Vue 实现响应式并不是数据发生变化之后 DOM 立即变化 Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次

12、vue 实例的属性【6个】

data、filters、computed、template、watch、methods

vue：基础：生命周期相关推荐

Vue基础——生命周期基础指令组件技术
Vue 一. 创建vue项目 tianqideMBP:try-vue tianqizhao$ vue init webpack hello? Project name hello ? Project ...
vue created 调用方法_vue 基础-生命周期 lifecycle 的执行顺序和作用
前言 <vue 基础>系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解.(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读) 平时开发中,我真的不太 ...
vue基础--vue的生命周期
一.什么是Vue生命周期 Vue实例从创建到销毁的过程. vue的每个组件从创建到销毁都会经历是系统特定的过程,就是vue的生命周期. 二.生命周期介绍 1.阶段 vue的生命周期可以简单的分为四 ...
vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
vue 多页面应用例子_【微服务】137：Vue之生命周期钩子
今天是刘小爱自学Java的第137天. 感谢你的观看,谢谢你. 学习计划安排如下: Vue的深入学习,emm准确地说还不能算是深入学习,我有点高估自己的学习进度了. 本来打算两天时间做一个基础入门的, ...
Vue的生命周期过程详解
Vue的生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的 ...
⑥ Vue的生命周期
目录: 初探vue Vue基础语法 - 渲染类型 Vue基础语法 - 属性绑定 Vue基础语法-双向绑定 Vue基础语法-事件处理看过很多人讲vue的生命周期,但总是被绕的云里雾里,尤其是自学的同学 ...
Vue.js 生命周期
2019独角兽企业重金招聘Python工程师标准>>> 每个 Vue 实例在被创建之前都要经过一系列的初始化过程 vue在生命周期中有这些状态, beforeCreate,creat ...
vue避免重新渲染_小白也能懂的VUE的生命周期探寻
Vue生命周期作为vue的核心之一,生命周期不管是文档还是面试都是高频知识点今天我们从什么是生命周期,生命周期的内容,如何利用生命周期出发,做一些探究生命周期的理解官方:Vue 实例从创建到销毁的过 ...
js字符串替换_浅析Vue的生命周期以及JS异步
前言 Vue的生命周期和JS异步都是有很多文章的知识点,我之前也是一知半解,基本够用. 但是直到我在开发的时候真的遇到了问题,才发现如果不把这些知识点融汇到一起,很难解决实际问题. 我甚至觉得这是我离 ...

vue：基础：生命周期

vue：基础：生命周期相关推荐

最新文章

热门文章