mkbird的博客

因为el-table懒加载的子节点是通过缓存实现的，如果想在展开的情况下直接刷新对应子节点数据，要操作el-table组件自身数据，否则不会更新。

现实中遇到的场景是，有三个页面（总览页、列表页、详情页），三个页面逐级跳转（总览页 -> 列表页 -> 详情页）。乍一看没什么问题，到详情页的时候将keepAlive设为true进行缓存，返回到总览页的时候设置为false取消缓存，但仔细想一下，这样写是晚一步的，是否缓存在刚进入页面时就定下来了，在。销毁组件后会导致缓存异常（回退时不使用缓存的列表页，而是创建了个新的，并且会一直缓存）。，只在返回时销毁keep-alive的缓存，此时又出现了一个新的问题，在使用。网上很多教程的写法是，在列表页使用。

以前前端是通过MVC模式管理代码，但后来我们使用例如Vue、React、Angular这类通过声明式开发的框架，发现状态很难管理，容易出现状态被任意修改。在vue中我们经常会使用到路由，路由有hash和history两种模式，二者的实现思路基本相同，为了简便，我们以hash模式为例。监听路由变化的事件，修改data中的url，再通过动态组件变化，这样就实现了一个最基本的路由。，监听路由变化并修改vue实例中的url，使用计算属性得出当前的组件名，再动态显示。Vue2的状态管理使用的是。

高阶函数在函数式编程中经常出现，就是你原本有一个函数，你可以通过另外一个函数进行包裹，这个新的函数既具有原来函数的功能，又可以添加自己的功能，这种方式称为高阶函数。上面是它的使用方式，可以看到我们使用的时候需要传递完整的图片地址，这很不方便。用于获取组件所有属性，这是2.4之后才支持的功能，下面代码我们把高阶组件设置的属性传递给原始组件。，我们在外部函数中完成根据用户名查询头像地址，在内部函数组件。，这个函数接收内部组件，本例中内部组件就是。这里我们使用高阶组件，创建一个函数组件。我们现在有一个函数组件。

使用JavaScript操作真实DOM会非常消耗资源，因为要修改真实DOM操作的内容很多，但是如果使用虚拟DOM，你无论是如何增删修改节点，都只是在操作JS，这样会很节省资源。（当然：如果你能将DOM操作到炉火纯青，保证每次对DOM的操作都是较为节约快捷的方式，那还是要比虚拟DOM快的，毕竟我们多了一步将它转换成了JS，又变回真实DOM的过程）函数会生成新的虚拟DOM，即触发我们的发布，新的虚拟DOM和旧的虚拟DOM进行比较，得出最少需要更新的节点并生成真实DOM完成一次更新。

插件的本质其实是一个普通函数，因此插件往往会结合mixin使用，即将重复的代码混入到Vue实例中，供组件复用。但是mixin是全局api，他会被应用到所有实例中。比较危险(doge)因此较为优秀的方法是使用插件包裹，因为插件会自动删除且更加便于理解。所以我们推荐使用Vue.use这里我们先抛出一个定义插件方法的结论，避免对之后的内容产生误解。// install第一个参数为Vue，第二个参数为数据 插件对象 . install = function(Vue , options) {

函数用于对象的getter和setter监听，也通过发布订阅模式实现了依赖的跟踪，接下来将二者结合实现vue的数据更新系统。函数是接收一个函数，这个函数帮助我们创建一个响应区，当代码放在这个响应区内，就可以通过dep.depend方法注册依赖项。写在前面的话：当我们在使用vue的时候，可能会非常好奇，为什么vue能实现这种响应式的数据更新，为什么可以动态渲染。这篇文章并不是直接对vue的源码进行阅读，而是通过一些小demo理解vue的作用原理。发布事件，即可实现vue的数据更新。时，会再次执行依赖项。

由于vue在更新dom时是异步执行的，所以可能会产生数据变化但dom还没有变化的情况，如果你想在dom变化后来做一些事情，可以使用nextTick，这样回调函数会在dom更新完成后被调用。vue无法检测对象属性的添加和移除，所以我们直接追加数据不会触发响应式。当想要一次添加多个新属性时，应该用原对象和要混入的对象组成一个新对象。的一些功能的舍弃，vue不能检测数组和对象的一些变化。如果按照上面的写法，input还没有渲染出来，通过。以上两种情况都可以使用数组的splice解决。vue对这种情况提供了。...

props在子组件中）

对于任何复杂逻辑，都应当使用计算属性经过一系列计算后得到的属性值，这个值可以被模板结构或methods方法使用本例中主要使用``对字符串拼接，内部引用数据格式为${}computed节点下，

先看代码因为el-cascader的v-model绑定的必须是数组所以在我点击对应页面发起请求的时候，将需要的值push到cityCascader中此时就会出现标题的问题，我的cityCascader的数据是符合要求的，但是级联选择框没有默认数据，只有默认选中解决方法是，不使用数组的push方法，而是直接重新赋值此时就可以默认显示啦...

文章目录vuex基本使用mapState和mapMutationsgettermodulevuex基本使用src下创建store文件夹，里面的index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ // 全局公用数据 state:{ city:'北京' }, // 异步方法 actions:{ changeCity(

Vue的set方法通过set方法添加对象属性var vm = new Vue({ el:"#app", data:{ userInfo:{ name:"Dell", age:28, gender:"male", salary:"secret" } }})Vue.set(vm.userInfo,"address","beijing")// 或者通过Vue实例vm.$set(vm.userInfo,"address","beijing")数组中的使用va

动态组件component组件占位符:is表示要渲染组件的名字<component :is=""></component>动态组件被切换的时候会被销毁，切换回去的时候会重新创建，为了保持组件的状态，使用keep-alive可以把内部组件进行缓存，而不是销毁<keep-alive> <component :is=""></component> </keep-alive>当使用keep-alive时，组件被缓存时，会

listeners是一个对象，包含了所有作用在这个组件上的所有监听器，这样这个input就相当于没有外界的包裹了。，现在这样是无法触发的，因为my-button不是原生dom，无法直接绑定原生事件并触发。，一旦子组件有多个根标签等情况，就无法触发事件。...

文章目录Vue组件间通信父传子子传父不相关组件通信多级组件嵌套向下传（其实还是在一级一级传）获取父/子组件的数据真正的多级组件传值组件间通信的注意事项Vue组件间通信父传子父给子传值，子用props收// 父<Son msg="hello">// 子props:['msg']子传父子组件在一个方法中用this.$emit定义自定义事件和要传递的值，父组件使用这个自定义事件，传递的值以函数参数的形式子this.$emit定义事件并传值，父使用事件并函数参数接收// 子e

文章目录路由前端路由前端路由工作方式vue-router基本使用嵌套路由动态路由基本使用开启props传参拓展（路由this都可以省略）声明式导航&编程式导航导航守卫全局前置守卫路由就是对应关系前端路由指的就是hash地址(#与#后面的地址)与组件之间的对应关系前端路由工作方式用户点击了页面上的路由链接导致了URL地址栏中的hash值发生了变化前端路由监听到Hash地址变化前端路由把当前Hash地址对应的组件渲染到浏览器体验路由思路 <a href="#/hom

文章目录插槽插槽还可以定义一些数据给父组件用(作用域插槽)插槽插槽(slot)是vue为组件的封装者提供的能力，允许在封装组件时，把不确定的、希望由用户指定的部分定义为插槽子组件使用vue规定插槽必须有名称，省略会用默认名称default<slot name="">用户没有使用时的默认内容</slot>父组件v-slot用于指定插槽名称，必须用template包裹//v-slot:简写是#<template v-slot:default> <p

文章目录组件（对ui结构的复用）三个组成部分组件之间的父子关系使用组件的三个步骤私有组件全局组件组件的props基本用法使用场景组件之间的样式冲突scoped/deep/组件（对ui结构的复用）vue规定组件的后缀名必须是.vue三个组成部分template：组件的模板结构script：组件的JavaScript行为注意有一个不同点.vue组件中的data不能指向对象，必须是一个方法，在return{}里面定义数据style：组件的样式<template> <

如果有多个元素同时需要被切换，我们的第一反应是用一个div包裹起来然后用v-if，但是这样会有一个问题，dom中会多产生一个div；但是这样给我们造成了困扰，我们想在切换的时候重新渲染输入框怎么办，vue的策略是给两个input设置不同的key。与v-if同理，v-for也可以在template上使用，一次循环渲染包含多个元素的内容。MVVM是vue实现数据驱动视图和双向数据绑定的核心原理，M，V，VM。现在我们遇到了一个问题，我们想要获取到鼠标对象e，此时可以使用**，例如双层for循环，我们可以。...

Vue：页面初始化Element-UI的Message自动弹出