![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Double_路
学不可一蹴而就,坚持是胜利之光
展开
-
解决Vue中provide没有双向的绑定问题
问题描述:子组件调用父组件的方法修改了父组件的某个值,将这个值通过provide传递给子组件,但是子组件拿到的这个值是未被修改的值,原来provide并不会在数据变化后将新的值传递解决办法:将想要传递的值外面再套一层,让它变成一个对象父组件:<template> <div> <Toolbar v-model="theme"></Toolbar> <button @click="changeTheme">切换{{ thi原创 2021-08-31 10:33:39 · 578 阅读 · 0 评论 -
Vue中v-if和v-show的区别
v-show和v-if的区别:v-if是真正的条件渲染,切换过程中条件块内的事件监听和子组件适当的被销毁和重建v-if是惰性的,初始条件为假时什么也不做,直到第一次变为真的时候才会开始渲染条件块v-show使用的是display,总是被渲染,只是是否被显示的问题v-if有切换开销,v-show有渲染开销...原创 2021-08-16 13:51:37 · 48 阅读 · 0 评论 -
Vue3属性绑定
Vue3属性绑定小结:默认所有属性都绑定到根元素使用inheritAttrs: false可以取消默认绑定使用$attrs或者context.attrs获取所有属性使用v-bind="$attrs"批量绑定属性使用const {size,...rest} = context.attrs将属性分开,...rest是ES6的剩余操作符...原创 2021-07-21 21:16:34 · 557 阅读 · 0 评论 -
Vue2到Vue3的一个很大的变动
Vue2到Vue3的一个很大的变动就是父子组件之间的通信,在Vue2时我们是这样的:在父组件中定义一个变量,子组件通过props获取到这个变量的值,通常情况下我们是想要修改这个值的,但是子组件是没有权限修改父组件变量的值,这就产生了emit和$event,emit用在子组件中,常用的有两个参数,第一个参数是事件名,第二个参数是事件参数,当然事件名是可以自己随便定义的,在父组件中使用$event取到修改后的内容,然后将这个值修改代码实例:父组件:<template> <Switch原创 2021-07-21 19:24:54 · 180 阅读 · 0 评论 -
Vue 中的 .sync 修饰符
Vue官网上对.sync是这么说的,:name.sync就是:name="name" @update:name="name = $event"的缩写。它的使用场景是这样的:在Vue中,子父组件(就是两个.vue的文件)最常用的通信方式就是通过props进行数据传递,props值只能在父组件中更新并传递给子组件,在子组件内部,是不允许改变传递进来的props值,这样做是为了保证数据单向流通。但在某些时候,就是需要在子组件内部改变props属性值并更新到父组件中,这时就需要用到.sync修饰符。例如,在父原创 2021-06-29 10:37:10 · 159 阅读 · 0 评论 -
computed 和 watch 的区别 前端面试题
首先,computed是计算属性的意思,watch是监听的意思之后各自描述一下:computed是用来计算出一个值的,这个值在调用的时候不需要加括号,可以把它当成一个属性一样的用。它也会根据依赖自动缓存,依赖不变时值不会重新计算。watch用来在监听的东西发生改变后去执行一个函数,它有两个选项:一个是immediate表示是否在第一次渲染时就执行这个函数,是的话就是true,默认是false。第二个是deep,表示如果监听一个对象,是否要看这个对象里面的属性的变化,是的话就是true,默认是fa.原创 2021-06-28 10:33:55 · 722 阅读 · 0 评论 -
Vue 数据响应式
对于如下代码:const vm = new Vue({data:{n:0}})new Vue内部对data对象进行监听,即一旦修改n的值以后,的值会立马变成修改后的值,如果在页面显示n的值的话,n会显示出修改后的值。new Vue会用一个变量把当前n的值保存下来,假设这个变量叫做xxxlet n = data.nObject.defineProperty给data对象一个虚拟的属性(假设为n),通过getter/setter方法模拟对’n’的读写操作同时覆盖原来的值,这样就保存了原始的值原创 2021-06-27 17:04:20 · 202 阅读 · 0 评论 -
Vue两个版本的区别和使用方法
一、vue给了我们两个版本,我们通常称为完整版和非完整版,现在说一下这两个版本都有什么区别特点方面完整版有compiler(编译器)非完整版没有compiler问题来了,既然完整版是有编译器的,那么它就一定会含有一定的体积(毕竟它也是代码写的啦),而这个compiler竟然占有了40%的体积,所以通常为了用户体验,很多人还是更乐意使用非完整版,客户终究是上帝。O(∩_∩)O哈哈~视图方面完整版视图写在HTML里,或者写在template选项中非完整版写在render函数里,用h来创建标签,原创 2021-06-24 19:46:48 · 1006 阅读 · 2 评论