vue
BonnieYY
做人,一定要有梦想
展开
-
简述Vue的响应式原理
data的属性被转换成getter和setter,并且记录相应的依赖。当它被改动时,会通知相应的依赖。所有的组件实例都有相应的watcher实例,而watcher实例会依赖相应的setter。当数据变化的时候,会调用setter,而setter会通知watcher实例,watcher会更新相应的视图图:data 属性 - > { getter, setter }组件 -...原创 2020-03-27 07:56:03 · 743 阅读 · 0 评论 -
npm ERR!无法安装任何包的解决办法
转:https://blog.csdn.net/weng423811758/article/details/51537594PS F:\LargeFrontEnd\vue-admin> npm installnpm ERR! code ENOTFOUNDnpm ERR! errno ENOTFOUNDnpm ERR! network request to http://registr...转载 2020-03-19 15:15:27 · 4954 阅读 · 3 评论 -
Vue中的diff算法
用于打补丁(patch)在Vue中,渲染真实dom是非常耗费性能的。重绘就是css的颜色变化(字体颜色、背景颜色)或背景图片变化 ----repaint重排就是dom节点的增删 宽高位置 display:none 或者是查询x轴到节点位置offsetLeft dom宽度 offsetWidth --------reflow重绘性能比重排好如果直接渲染,就会渲染真实dom这棵...原创 2019-02-26 13:59:35 · 339 阅读 · 0 评论 -
mapState、mapGetter、mapActions、mapMutations使用方法
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'//this.$store.state.xxx 映射...mapState({ add:state=>state.add, count:state=>state.count})//2...mapState(['add','cou...原创 2019-02-26 15:46:58 · 983 阅读 · 0 评论 -
vue中的 namespaced
//在vue中会这样配置export default { namespaced: true, state, getters, actions, mutations}状态管理机制 new Vuex.Store() namespaced这是属性用于解决不同模块的命名冲突问题在不同页面引入getter、actions、mutations时,要加上模块名 ....原创 2019-02-26 15:55:38 · 7353 阅读 · 1 评论 -
发布订阅
原创 2019-03-26 10:42:40 · 102 阅读 · 0 评论 -
Vue 用 key 管理可复用的元素
起源:<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> li{ list-style: none; } </style> ...原创 2019-03-27 17:08:31 · 252 阅读 · 0 评论 -
$set 注意
对于已经创建好的实例,不能在它的根级目录上添加属性。但是,可以通过$set在嵌套对象添加响应式属性原创 2019-03-27 17:31:26 · 140 阅读 · 0 评论 -
Vue
Vue的方法,如果不传参,第一个参数就是event 原生DOM事件。如果传参后,想访问原生的DOM事件,就将$event当参数传进去。原创 2019-03-27 18:15:45 · 89 阅读 · 0 评论 -
Vue插槽的简单用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no&q原创 2019-02-28 17:02:25 · 197 阅读 · 0 评论 -
vuex中的dispatch和commit的使用
dispatch 异步操作 this.$store.dispatch('actions的方法',arg)commit 同步操作 this.$store.commit('mutations的方法',arg)原创 2019-02-13 16:35:29 · 21907 阅读 · 3 评论 -
$router和$route的区别
$router是一个VueRouter的实例 可以导航到不同的路由里$route是$router跳转到的当前一个对象,里面包含该对象的path、query、name 、params 用法 : this.$router.push() 跳转到指定的url 会向history栈添加一个记录 点击后退会返回上一页面1、this.$router.push({path:'/detail',q...原创 2019-02-13 11:04:20 · 6343 阅读 · 0 评论 -
new Vue()中究竟发生了什么?
new Vue()是实例化一个Vue对象在构造函数中执行_init(options),随后导入五大Mixin,进行实例化的初始化过程initMixin(Vue) // options初始化stateMixin(Vue) // 状态(props、state、computed、watch)eventsMixin(Vue) // 事件lifecycleMixin(Vue) // 生命周...原创 2019-02-15 13:22:45 · 2149 阅读 · 0 评论 -
Vue中template的编译过程
template可以放标签template 经过comfile编译器编译成ast语法树(这个网址说得很好:https://segmentfault.com/a/1190000016231512)然后,执行render方法,但并没有真正地挂载(渲染页面)上去,完成虚拟dom的配置。render的首次被调用是在挂载开始前beforeMount...原创 2019-02-15 13:29:58 · 673 阅读 · 0 评论 -
子组件随父组件实时更新的方法
1、赋值给子组件的data属性里面2、用watch监听数据的变化并修改或者用computed修改原创 2019-02-15 18:04:48 · 1010 阅读 · 1 评论 -
Vue.extend()和Vue.component()
// Vue.extend() 传入选项对象 返回构造函数 let myExtend = Vue.extend({ data(){ return{ name:'jessica' } }, created(...原创 2019-02-22 10:59:20 · 358 阅读 · 0 评论 -
Vue中的nextTick
DOM的改变,会触发事件。事件是同步执行的。数据的更新,不会立刻触发视图的更新。在Vue中,DOM的变动是异步的。如果想要得到数据更新后的dom对象,并执行操作。初始化时可以写在mounted中,此外可以写在nextTick这个api中。Vue.nextTick(callback,执行上下文环境的this) --接收两个参数Vue.nextTick里面有三个重要变量:c...原创 2019-02-18 09:49:03 · 1494 阅读 · 0 评论 -
Vue Router 导航守卫
全局前置守卫beforeEach全局解析守卫beforeResolve全局后置钩子afterEach路由独享守卫beforeEnter beforeLeave路由组件内的守卫beforeRouteEnter beforeRouteUpdate beforeRouteLeave 文档地址:https://router.vuejs.org/zh/guide/advanced/n...原创 2019-02-18 11:16:08 · 112 阅读 · 0 评论 -
Vue中的命名方式
组件命名的两种方式1、kebab-case (短横线分隔符) eg: 'my-component-name' <my-component-name>2、PaselCase(首字母大写)eg: 'MyComponentName' <my-component-name> <MyComponentName> 两种都可以 但是在dom里面,只有<my-co...原创 2019-02-18 15:32:40 · 1092 阅读 · 0 评论 -
Vue 子组件不能改变父组件传递过来的值
子组件只能使用这个Vue.emit(this.$emit) 触发父组件的自定义事件this.$emit(event,arg) 这个方法触发当前实例的事件this.$on(event,fn) 监听event事件后运行fn 简单例子子组件props:["fruit"] (父组件传过来的)用户操作触发了 this.$emit("user",arg) 然后。。。执行下面的ope...原创 2019-02-13 09:31:46 · 2106 阅读 · 0 评论 -
Vue.use() 究竟发生了什么?
Vue.use()是全局注册一个组件或者插件的方法。每次注册前,都会判断一下这个组件或者插件(plugins)是否注册过,如果注册过,就不会再次注册了。Vue.use(plugins:object || function,args)的第一个参数是对象或者方法,如果是对象,就执行对象中的install方法,否则就直接执行传入方法。plugins的第一个参数是当前的Vue实例,其余参数是传入的...原创 2019-02-15 10:29:58 · 2726 阅读 · 1 评论