vue进阶
文章平均质量分 74
vue
神奇大叔
这个作者很懒,什么都没留下…
展开
-
vue3 effectScope解析
对于@vue/reactivity相关的Api,比如ref、computed、reactive、effect、watch等,根据当前的执行环境是否在组件上下文中,有以下两种情况:原创 2022-12-06 15:26:13 · 1880 阅读 · 0 评论 -
vue 简单的状态管理store
当访问数据对象时,一个组件实例只是简单的代理访问。所以,如果你有一处需要被多个实例间共享的状态,你可以使用一个 reactive 方法让对象作为响应式对象所有 store 中 state 的变更,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生,以及它们是如何被触发。const store = { debug: true, state: reactive({ message: 'Hello!' }), se.原创 2022-02-10 15:23:14 · 743 阅读 · 0 评论 -
vue 将属性变成响应式方案
在已经数据绑定的数据,添加新的属性后,该属性不会被数据绑定,即改变该数据,不会触发vue的渲染机制如给一个已经存在的对象添加新属性后,新属性更新不会引起界面更新解决方法: Vue.set(对象名,'属性',属性的值); 设置一次后,该属性就会被vue数据绑定代码示例: if(food.count) { food.count++; }else{ Vue.set(food,'count',1); //让对象新增的数据能够被vue数据绑定,动态原创 2020-05-30 15:37:22 · 1935 阅读 · 0 评论 -
vue watch+$nextTick界面更新渲染数据
$nextTick,在数据修改后,界面更新时立即调用回调的内容watch,监测数据改变,数据改变后此时数据更新,但界面未更新wathc+$nextTick,实现数据更新后,界面更新时重新渲染数据watch:{ xx(value){ this.$nextTick(()=>{ 进行诸如拿到数据再创建实例等操作 }) }}...原创 2020-05-26 15:37:08 · 2919 阅读 · 0 评论 -
vue 路由详细配置
1、设置路由元信息 在路由中: meta:{键值对}; 在对应组件中 this.$route.meta.键名读取2、路由过渡 路由的过渡方式和组件一样,使得组件中的所有内容都按照过渡动画过渡 <transition> <router-view></router-view> </transition...原创 2020-03-02 11:40:02 · 1356 阅读 · 0 评论 -
vue v-model原理实现,以及实现组件之间的双向绑定
v-model原理 如input:利用oninput事件监听input内容的变化,利用$event.target.value获取 实时内容,然后传递给组件中的变量,同时,input标签上利用v-bind又将value动态绑定值改变量,实现双向绑定按v-model原理实现子组件中的input和父组件双向绑定 (1)将子组件中的input监听@input事件,事件的回调函数利用$emit...原创 2020-02-27 17:41:12 · 2120 阅读 · 0 评论