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 有什么区别?

扫描二维码关注公众号,回复: 15720484 查看本文章

(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

猜你喜欢

转载自blog.csdn.net/u013592575/article/details/126703166