简述Vue computed 和 watch 的区别和运用的场景 ?

computed 和 watch 都是 Vue 中的重要特性,它们都用于观察和响应 Vue 实例上的数据变动。但是它们的使用场景和方式有所不同:

  1. computed(计算属性):
    • 计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生改变时才会重新求值。这意味着只要依赖没有改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。
    • 计算属性适合用在模板渲染中,某个值是依赖其他的响应式对象甚至多个计算属性计算而来;当这些依赖发生变化时,计算属性会重新计算新的值。这使得我们在处理复杂逻辑时,能够将复杂逻辑拆分在各个计算属性中,使得代码更清晰易读。
  2. watch(侦听器):
    • 侦听器允许我们对数据进行异步操作,每当监听的数据变化时,都会执行回调进行后续操作。
    • 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。例如,当一些数据改变需要向服务器发送请求,或者在数据改变后需要进行一些延时的复杂逻辑,这些场景下,使用 watch 是非常有用的。

总的来说,当你需要在数据变化后执行异步或开销较大的操作时,使用 watch;当你需要根据其他数据变动实时计算或处理一些数据时,使用 computed

1. 双向数据绑定的原理 简述一下MVVM。 MVVM是Model-View-ViewModel的缩写,是一种前端架构模式。它通过数据绑定实现了ViewModel的自动同步,ViewModel作为ViewModel之间的桥梁,负责处理View的事件数据绑定,同时也负责将Model的数据转换为View所需的数据格式。MVVM的核心思想是数据驱动,通过数据的变化来驱动视图的变化。 2. 知道MVC吗?说一下区别 MVC是Model-View-Controller的缩写,也是一种前端架构模式。与MVVM不同的是,MVC中的Controller负责处理View的事件数据绑定,同时也负责将Model的数据转换为View所需的数据格式。而在MVVM中,ViewModel承担了Controller的职责,负责处理View的事件数据绑定。 3. Vue实现数据响应式的基本原理 Vue实现数据响应式的基本原理是通过Object.defineProperty()方法对数据进行劫持,当数据发生变化时,会触发对应的更新操作,从而实现视图的自动更新。 4. 使用 Object.defineProperty() 来进行数据劫持有什么缺点? 使用Object.defineProperty()进行数据劫持的缺点是无法监听到数组的变化,需要通过特殊的方法来实现数组的监听。 5. Computed Watch区别 Computed是计算属性,它会根据依赖的数据动态计算出一个新的值,并缓存起来,只有当依赖的数据发生变化时才会重新计算。而Watch是监听器,它会监听指定的数据变化,并在数据变化时执行指定的回调函数。 6. Computed Methods 的区别 ComputedMethods的区别在于,Computed是计算属性,它会根据依赖的数据动态计算出一个新的值,并缓存起来,只有当依赖的数据发生变化时才会重新计算;而Methods是方法,它会在每次调用时重新计算。 7. slot是什么?有什么作用?原理是什么? slot是Vue中的插槽,它允许我们在组件中插入任意内容,从而实现组件的复用灵活性。原理是在组件中定义一个或多个slot,然后在使用组件时,将需要插入的内容放在对应的slot中即可。 8. 过滤器的作用,如何实现一个过滤器 过滤器的作用是对数据进行格式化或处理,从而满足特定的需求。实现一个过滤器需要在Vue实例中定义一个filters对象,然后在模板中使用管道符“|”将需要过滤的数据过滤器名称连接起来,例如:{{ data | filterName }}。 9. 如何保存页面的当前的状态 可以使用Vue Router的导航守卫来保存页面的当前状态,例如在beforeRouteLeave钩子函数中将当前页面的状态保存到localStorage中,在beforeRouteEnter钩子函数中从localStorage中读取保存的状态并恢复页面。 10. 常见的事件修饰符及其作用 常见的事件修饰符有:.stop、.prevent、.capture、.self、.once,它们的作用分别是阻止事件冒泡、阻止默认事件、使用事件捕获模式、只在事件目标自身触发时触发事件、只触发一次事件。 11. v-if、v-show、v-html 的原理 v-ifv-show都是Vue中的条件渲染指令,v-if会根据条件动态添加或删除DOM元素,而v-show则是通过CSS样式来控制元素的显示隐藏。v-html指令用于将数据作为HTML插入到模板中。 12. v-ifv-show的区别 v-ifv-show的区别在于,v-if会根据条件动态添加或删除DOM元素,而v-show则是通过CSS样式来控制元素的显示隐藏。当条件不满足时,v-if会将对应的DOM元素从DOM树中删除,而v-show只是将元素的display属性设置为none。 13. v-model 是如何实现双向数据绑定的? v-model是通过对input事件value属性的绑定来实现双向数据绑定的。当用户输入数据时,会触发input事件,从而更新数据模型中的值;当数据模型中的值发生变化时,会将新的值赋给input元素的value属性,从而更新视图。 14. data为什么是一个函数而不是对象 data为函数而不是对象的原因是为了实现数据的复用。当组件被复用时,如果data是一个对象,那么所有的组件实例都会共享同一个数据对象,从而导致数据混乱;而如果data是一个函数,每个组件实例都会调用一次该函数,从而实现数据的独立性。 15. 对keep-alive的理解,它是如何实现的,具体缓存的是什么? keep-alive是Vue中的一个抽象组件,它可以将动态组件缓存起来,从而提高组件的性能。keep-alive的实现原理是通过在组件的生命周期中添加beforeRouteLeaveactivated钩子函数来实现缓存恢复。具体缓存的是组件的状态DOM结构。 16. Vue 单页应用与多页应用的区别 Vue单页应用是指所有的页面都在一个HTML文件中,通过Vue Router实现页面的切换路由控制;而Vue多页应用是指每个页面都有自己的HTML文件,通过Vue实现组件化数据驱动。 17. Vue template 到 render 的过程 Vue template到render的过程是通过Vue的编译器将template模板编译成render函数,然后将render函数渲染成真实的DOM元素。在编译过程中,Vue会将模板中的指令表达式转换为对应的render函数代码,从而实现模板到render的转换。 18. Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染 吗? 不一定,Vue使用异步更新队列来处理数据的变化视图的更新,当数据发生变化时,Vue会将更新操作推入到异步更新队列中,然后在下一个事件循环中执行更新操作,从而实现性能的优化。 19. 描述下Vue常用指令 Vue常用指令有:v-if、v-show、v-for、v-bind、v-on、v-model、v-html、v-text等。它们分别用于条件渲染、显示隐藏元素、循环渲染、绑定属性、绑定事件、实现双向数据绑定、插入HTML插入文本等操作。 20. 描述下Vue自定义指令 Vue自定义指令是一种扩展Vue功能的方式,它可以用于封装常用的DOM操作行为,从而提高代码的复用性可维护性。自定义指令需要在Vue实例中定义一个directives对象,然后在模板中使用v-指令名称来调用自定义指令。 21. 子组件可以直接改变父组件的数据吗? 不可以,子组件不能直接改变父组件的数据,因为Vue中的数据流是单向的,只能从父组件向子组件传递数据。如果需要改变父组件的数据,可以通过在子组件中触发事件并传递数据的方式来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值