vue基础知识分享

    • computed和watch的区别

对于Computed:

。它支持缓存,只有依赖的数据发生了变化,才会重新计算

·不支持异步,当Computed中有异步操作时,无法监听数据的变化

·computed的值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data声明过,或青父组件传递过来的props中的数据进行计算的。

·如果一个属性是由其他属性计算而来的,这个属性依赖其他的属性,一股会使用computed·如果computed属性的属性值是函数,那么默认使用get方法,函数的返回值就是属性的属性值;在computed中,属性有一个get方法和一个set方法,当数据发生变化时,会调用set方法

对于Watch:

。它不支持缓存,数据变化时,它就会触发相应的操作

·支持异步监听

·监听的函数接收两个参数,第一个参数是最新的值,第二个是变化之前的值

。当一个属性发生变化时,就需要执行相应的操作

,监听数据必须是data中声明的或者父组件传递过来的props中的数据,当发生变化时,会触发其他操作,函数有两个的参数:

immediate: 组件加载立即触发回调函数

deep: 深度监听,发现数据内部的变化,在复杂数据类型中使用,例如数组中的对象发生变化。需要注意的是,deep无法监听到数组和对象内部的变化

当想要执行异步或者昂贵的操作以响应不断的变化时,就需要使用watch。

总结:

computed 计算属性:依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。watch 侦听器:更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。

运用场景:

当需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时都要重新计算.

当需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许执行异步操作(访问一个 API),限制执行该操作的频率,并在得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

2.slot是什么? 有什么作用? 原理是什么?

slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽slot堤了组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。slot又分三类,默认插槽,具名插槽和作用域插槽。

·默认插槽: 又名匿名插槽,当slot没有指定name性值的时候一个默认显示插槽,一个组件内只有有一个匿名插槽。

·具名插槽: 带有具体名字的插槽,也就是带有name属性的slot,一个组件可以出现多个具名插槽·作用域插槽:默认插槽、具名插槽的一个变体,可以是匿名插槽,也可以是具名插槽,该插槽的不同点是在子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

实现原理:当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在 msslot 中,默认插槽为m.Sslot.default ,具名插槽为 m.$slotxxx ,xxx 为插槽名,当组件执行染函数时候,遇到slot标签,使用 $slot 中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽.

3.过滤器的作用,如何实现一个过滤器

根据过滤器的名称,过滤器是用来过滤数据的,在Vue中使用 filters 来过滤数据, filters 不会修改数据而是过滤数据,改变用户看到的输出(计算属性 computed ,方法 methods 都是通过修改数据来处理数据格式的输出显示)。

使用场景:

。需要格式化数据的情况,比如需要处理时间、价格等数据格式的输出/显示比如后端返回一个 年月日的日期字符串,前端需要展示为 多少天前 的数据格式,此时就可以用 fliters 过滤器来处理数据。

猜你喜欢

转载自blog.csdn.net/weixin_71171795/article/details/128540336