随笔分类 - vue
摘要：vue.js生命周期的八大状态： 1、beforeCreate（创建前）：vue实例初始化之前调用 此阶段为实例初始化之后，此时的数据观察和事件配置都还没有准备好，而此时的实例中的data和el还是underfined状态，不可用的，dom元素也未加载,此时使用html片段代码我们加上ref属性，用
阅读全文
摘要：this.$router是vueRouter实例,包含了路由跳转方法和一些钩子函数 $router对象是全局路由的实例，是router构造方法的实例 路由实例方法: push(): push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。 go()
阅读全文
摘要：key属性必须是唯一标识,并且给key赋值的属性必须是不可变的(number或string) key作用: 提高渲染性能:若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。 避免数据混乱结果出现:如果结构中还包含输入类的DOM： 会产生
阅读全文
摘要：路由模式错误 将路由模式mode设置成了history,默认hash;将其修改为hash dist文件引用路径错误 打包后dist目录下文件的引用路径不对,因找不到文件而报错白屏 修改config下index.js模块的导出路径 浏览器不支持es6 由于使用了es6语法,但浏览器不支持造成编译错误无
阅读全文
摘要：props/$emit 父组件向子组件传值 子组件向父组件传值通过事件形式,实际上就是子组件把数据发送到父组件 vuex Vuex实现了单向数据流,在全局使用State存放数据,当组件需要修改数据时,需要通过Mutation进行操作,mutation同时提供了订阅者模式供外部插件获取State数据的
阅读全文
摘要：vuex用于管理组件的全局状态(数据),方便组件之间的数据共享 创建store对象 const store = new Vuex.Store({...}); store中存储的状态是响应式的,当组件从store中读取状态时,如果store中的状态改变,那么相应的组件也会改变 不能直接改变store中
阅读全文
摘要：diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记 录的消息去局部更新Dom。 特点: 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 步骤: 用 JavaScript 对象结构表示 DOM 树的结构；然后
阅读全文
摘要：挂载阶段 父beforecreated->父created->父beforemounted->子beforecreated->子created->子beforemounted->子mounted->父mounted 更新阶段 父beforeUpdate -> 子beforeUpdate -> 子up
阅读全文
摘要：keep-alive是vue.js的一个内置组件,它将不活动的组件保存在内存中,而非只讲将其销毁,提供了include(缓存),exclude(不缓存)两个属性,可以有选择的保存组件 语法: <keep-alive> <component></component> </keep-alive> 生命钩
阅读全文
摘要：虚拟dom本质上是js对象,是对真实dom的抽象,在状态变化时,记录新树和旧树的差异,最后把差异更新到真实dom中 虚拟dom将dom的对比放在了js层,通过对比不同之处来选择新的渲染节点,从而提高渲染效率 优缺点: 虚拟dom能保证下限,通过diff算法找出最小差异,然后批量patch,这样虽比不
阅读全文
摘要：现代我们在开发SPA(单页面应用时)往往会用到路由(vue-router) 有两种模式 Hash模式 一种把前端路由的路径用#拼接在真实url后面的模式,当#后的地址变化时,浏览器不会重新发起请求,而是触发onhashchange事件 网页url组成 示例 http://127.0.0.1:8001
阅读全文
摘要：v-for的优先级比v-if高,这意味着v-if将运用于每个v-for中,造成资源浪费 解决: 可以将v-if放到v-for的外层,先进行一次判断 利用computed计算属性先把v-for需要的属性过滤一遍
阅读全文
摘要：功能上:computed是计算属性;watch是监听一个值的变化,然后执行相应的回调 computed中函数所依赖的数据没有发生变化,就会从缓存中调取;watch每当监听的数据变化时就会执行回调 computed必须要有return返回值;watch可以没有 computed默认第一次加载的时候就监
阅读全文
摘要：区别: mvvm通过数据驱动视图层的显示而不是节点操作 mvc中的view和model是可以直接访问的,造成耦合度较高 mvvm真正将页面和数据逻辑分离,将数据绑定放到js实现,解决了mvc中大量的dom操作使得页面渲染速度将降低,加载速度慢 mvc(Model-View-Controller)是单
阅读全文
摘要：vue双向数据绑定的核心思想是MVVM(Model-View-ViewModel),View和Model是没有直接联系,通过ViewModel进行交互 当用户操作View,ViewModel会感知到,然后通知Model发生相应的变化;当Model变化时,ViewModel会使View发生相应的更新
阅读全文
