-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
第 17 题:Vue 常考基础知识点 #32
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
v-if 和 v-show的区别
v-show
只是在display: none
和display: block
之间切换。无论初始条件是什么都会被渲染出来,后面只需要切换CSS
,DOM
还是一直保留着的。所以总的来说v-show
在初始渲染时有更高的开销,但是切换开销很小,更适合于频繁切换的场景。v-if
的话就得说到Vue
底层的编译了。当属性初始为false
时,组件就不会被渲染,直到条件为 true,并且切换条件时会触发销毁/挂载组件,所以总的来说在切换时开销更高,更适合不经常切换的场景。并且基于
v-if
的这种惰性渲染机制,可以在必要的时候才去渲染组件,减少整个页面的初始渲染开销。computed 和 watch 的区别
computed
是计算属性,依赖其他属性计算值,并且computed
的值有缓存,只有当计算值变化才会返回内容。watch
监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。所以一般来说需要依赖别的属性来动态获得值的时候可以使用
computed
,对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用watch
。keep-alive
如果你需要在组件切换的时候,保存一些组件的状态防止多次渲染,就可以使用
keep-alive
组件包裹需要保存的组件。对于
keep-alive
组件来说,它拥有两个独有的生命周期钩子函数,分别为activated
和deactivated
。用keep-alive
包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated
钩子函数,命中缓存渲染后会执行actived
钩子函数。组件通信
组件通信一般分为以下几种情况:
父子通信
父组件通过 props 传递数据给子组件,子组件通过 emit 发送事件传递数据给父组件,这两种方式是最常用的父子通信实现办法。
这种父子通信方式也就是典型的单向数据流,父组件通过 props 传递数据,子组件不能直接修改 props, 而是必须通过发送事件的方式告知父组件修改数据。
另外这两种方式还可以使用语法糖 v-model 来直接实现,因为 v-model 默认会解析成名为 value 的 prop 和名为 input 的事件。这种语法糖的方式是典型的双向绑定,常用于 UI 控件上,但是究其根本,还是通过事件的方法让父组件修改数据。
当然我们还可以通过访问 $parent 或者 $children 对象来访问组件实例中的方法和数据。
另外如果你使用 Vue 2.3 及以上版本的话还可以使用 $listeners 和 .sync 这两个属性。
$listeners 属性会将父组件中的 (不含 .native 修饰器的) v-on 事件监听器传递给子组件,子组件可以通过访问 $listeners 来自定义监听器。
.sync 属性是个语法糖,可以很简单的实现子组件与父组件通信
兄弟组件通信
对于这种情况可以通过查找父组件中的子组件实现,也就是
this.$parent.$children
,在 $children 中可以通过组件 name 查询到需要的组件实例,然后进行通信。跨多层次组件通信
对于这种情况可以使用 Vue 2.2 新增的 API provide / inject,虽然文档中不推荐直接使用在业务中,但是如果用得好的话还是很有用的。
假设有父组件 A,然后有一个跨多层级的子组件 B
任意组件
这种方式可以通过 Vuex 或者 Event Bus 解决,另外如果你不怕麻烦的话,可以使用这种方式解决上述所有的通信情况
The text was updated successfully, but these errors were encountered: