vue--4.计算属性、属性侦听器、自定义指令、生命周期函数和组件

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1.计算属性(面试)

示例如下：

 

 

 计算属性和方法的区别:(面试)

        计算属性会把使用到的data中的属性缓存起来，防止页面发生大量重复计算， 提升js 运行效率,如果计算属性中使用到的data中那部分数据变了才会重新调用计算属性。

        methods方法没有计算结果缓存起来，data任何数据发生改变，方法都会被重新调用一遍 方法常常是作用的事件使用,计算属性常常是动态计算结果时使用

2.属性侦听器

watch:{x(){}}中的方法名必须跟要监听的data中的属性名一样,才代表监听指定属性

当侦听器监听的属性发生变化时,就会调用watch中对应的方法

侦听器属性，比计算属性计算效率消耗大。

 示例如下：

3.自定义指令(面试)

除了默认设置的核心指令( v-model 和 v-show 等)，Vue 也允许注册自定义指令。

在Vue里，代码复用的主要形式和抽象是组件。

然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令

示例如下：

 

 4.生命周期函数(面试)

 

vm对象的生命周期函数(钩子函数,生命钩子)

相当于是一种特殊事件,当vm实例在整个运行的过程中,会在不同的时期去执行特定的函数,这样的函数就是vue的生命周期函数

        beforeCreate created beforeMount mounted destory/x这些钩子都只执行一次

        beforeUpdate updated第一次构建不会调用,以后每次data被更新了就会调用

beforeDestroy destroyed 销毁的方式有两种:用户关闭和代码this.$destroy()//销毁vm实例

为什么要用生命周期函数?

        0.把整个运行期间的业务区分的很明显

        1.能够更好的帮助我们把产品的业务逻辑实现了

        2.更有利于我们维护产品 和 修改需求

        3.能够让我们写出更高质量的产品的代码 ​ ​

1.什么是生命周期函数?

            vue组件对象在创建到销毁的过程中,在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数

           

2.vue的命周期函数有哪些?

           普遍的答法:有8个创建前后,挂载前后,更新前后,销毁前后

            高级的答法:组件的有8个(创建前后,挂载前后,更新前后,销毁前后)、自定义指令也有5个、动态组件有2个 、路由(组件有3个,全局有2个,独享有1个) 

                       

3.为什么设计生命周期函数?

            为了更好的设计程序,让代码更有逻辑 和 可维护性

           

 4.页面首次加载过程中，会依次触发哪些钩子

            beforeCreate，created，beforeMount，mounted

           

5. this.$el 是什么?它在哪些钩子中才能访问?

            它代表了当前组件的真实DOM,要在mounted之后才有

           

6. Vue 实例的 data 属性，在哪些钩子中能访问

            created beforeMount mounted  beforeUpdate  updated  beforeDestroy

                       

7.为什么不要在更新钩子中做页面的数据请求?

            会导致死循环  react有一个shoudComponentUpdate可以自己控制 但是vue没有

           

8.你用beforeCreate做过什么业务?

            这个钩子中可以做网络请求 但是vm没有构建完毕,此时数据方法等等的劫持还没有完成,不能操作this,因此可以做预加载.

 9.VM和DOM之间的关系?

            9.1.VM是JS模拟出来的跟DOM结构很像的一种对象结构VNode.  它通过底层的render函数渲染到页面上,让页面DOM跟虚拟VNode关联映射.

            9.2 如果VM的数据源发生变化,会让内存中生成新的VNode  新的VNode会和旧的VNode作比较然后更新,这个过程就是DIFF算法

​网络请求应该在什么钩子中,为什么? ​

可以放在data生成以后更新数据之前 的所有钩子中

具体的更具业务需求来 常见的放在created或者mounted中 ​

因为网络请求下来的数据 常常会存在data容器中

created:因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势 mounted:因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI

5.组件(面试)

组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用

（5.1）组件使用的两种方式

第一种方式：

 

 第二种方式：