青山不改，绿水长流。

去监听这个 属性值的变化，如果发生变化则讲这个 val 传递给 this.screenWidth。在 vue mounted 的时候 去挂载一下 window.onresize 方法。这样screenWidth就跟随浏览器的窗口大小动态变化了。定义一个属性记录宽度。

input的v-model修改为v-model.number，type修改为tel，input事件用字符串的replace()方法将非数字的内容替换为空即可，然后input就只可以输入正整数了。

【代码】给data里面的变量增加属性。

要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象。可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据。如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法。子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作。

1.在config / index 文件里修改dev(npm run dev本地启动项目时)和build(npm run build 打包时)下的 assetsPublicPath:”/前缀”2.在npm run build打好的dist包里 ，/dist/config/index.js文件中修改 [‘domain’]=“/前缀” 也可以。router.js里：export default new Router({ base:”/前缀" , })给路由加前缀：而且路由模式用的是hash，

第一种：有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是created与mounted函数执行时一般dom并没有渲染完毕，所以就会出现获取不到，添加不了事件的问题，这回就要用到nextTick处理。第二种：在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法，例如:应用滚动插件better-scroll时。

3.计算属性在第一次使用时的结果会缓存起来，直到属性中依赖的data数据发生变化计算属性的结果才会重新求值。2.如果计算属性用到了data中的数据，当data数据发生变化时，就会立即重新计算这个计算属性的值。在computed中，属性有一个get方法和一个set方法，可以看作是 computed 和 methods 的结合体；1. 计算属性在使用时不需要加(),直接写名称即可。methods 方法表示一个具体的操作，主要书写业务逻辑；4.如果computed属性的。

vue函数式组件是一个不包含状态和实例的组件；该组件不支持响应式，并且不能通过this关键字引用，用于定义没有响应数据，也不需要有任何生命周期的场景，只接受一些props来显示组件。

属性名为自定义指令名，值为对象，内容为各个阶段执行的函数（钩子函数和参数同上）。-update()，所在组件的VNode跟新时调用，可能触发多次。oldValue，指令绑定的前一个值，仅在update()和componentUpdated()钩子中使用。-bind()，只调用一次，指令在第一次绑定到元素身上时调用。-inserted()，被绑定元素插入到父节点时调用（父节点存在即可调用，不必存在于dom中）。value，指令的绑定值。第一个参数：永远是el，表示绑定此自定义指令的元素，是个元素的js对象。

5.flushCallbacks()遍历callbacks的数据执行每一个callbacks函数,在callbacks数组中调用传入的刷新队列方法，执行watcher.run()方法触发render()渲染或者执行用户传入的回掉函数。4.nextTick()将刷新队列的方法以回调函数的方式添加到 刷新callbacks数组中 通过timeFunc()方法将flushCallbacks()放在浏览器的异步队列中。notify()方法执行对于dep（单个属性）的update()方法进行更新。

d）遇到复杂html时候 一套无法满足时 隐藏html显示htmlaxios 比 ajax对async await理解。

（1）pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据（2）pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点（3）pinia语法上比vuex更容易理解和使用，灵活。（4）pinia没有modules配置，没一个独立的仓库都是definStore生成出来的（5）pinia state是一个对象返回一个对象和组件的data是一样的语法。

1.jQuery根据业务逻辑操作DOM，注重实现过程，亲历亲为。vue根据Model数据变化驱动View视图的变化。Vue组件、打包压缩 => 单文件HTML页面，前后端分离（后端只负责API接口、前端实现视图逻辑）3.jQ需要配合后台服务器端渲染php/jsp/aspx,前后端不分离。2.jQ兼容性很好兼容到IE6，vue最低兼容到IE8。

vue2.0比较的过程是全量的比较，也就是每个节点都会彼此比较。有些节点中的内容是不会发生改变的，那我们对其进行比较就肯定消耗了时间。在Vue3.0当中，就对这部分内容进行了优化：在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。那么之后在与上次虚拟节点进行对比的时候，就只会对比这些带有静态标记的节点。组合式api的出现改善处理同一事件的逻辑却要分开的问题（改善业务逻辑的割裂），组合式适合大型项目。

【代码】Vue3 + elementplus 分页组件英文改为中文。

1、由于VueX/Pinia都是在浏览器内存中生成一个实例对象储存数据，一旦刷新页面，Vuex/Pinia重新初始化数据，无法持久化存储数据。持久化插件：pinia-plugin-persistedstate。VueX/Pinia的优点是什么？持久化插件：vuex-persistedstate。1、解决了非父子组件消息传递，共享状态的问题。VueX/Pinia的缺点是什么？2、减少ajax的异步请求次数。

vite开箱即用，更加简单，基于浏览器esm，使得hmr更加优秀，达到极速的效果；webpack更加灵活，api以及插件生态更加丰富。webpack是bundle，自己实现了一套模块导入导出机制。vite是利用浏览器的esm能力，是bundless。：分析各个模块之间的依赖=>然后进行编译打=>打包后的代码在本地服务器渲染。：启动服务器=>请求模块时按需动态编译显示。模块规范来执行代码，不需要打包编译成。：模块以及模块依赖的模块需重新编译。：浏览器重新请求该模块即可。模块即可在浏览器运行。

路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。类似于组件生命周期钩子函数。

当#后面的hash发生变化，对于hash模式会创建hashHistory对象，在访问不同的路由的时候会发生两件事件 使用push将新路添加到路径后面后者使用replace()替换到当前的路由。

如果每个都写得话太麻烦 meta: { requiresAuth: true },设置之后不仅一级路由 /article设置了其children 二级路由 默认也是 meta: { requiresAuth: true } 比如去/article/tag就需要登录 ，但我给二级路由list单独设置了meta: { requiresAuth: false },那么就不需要登录也能跳转到/article/list这个页面。

而Vue3通过createApp方法可以返回一个提供应用上下文的应用实例。不同实例注册的组件无法在不同的实例下使用。Vue3更适合在大型的开发环境中使用，不同开发人员可以完全独立地使用不同的实例。Vue2的组件系统设计中，所有Vue实例是共享一个Vue构造函数对象的，包括全局指令/全局组件，无法做到相互隔离。，其他的单文件组件创建的 Vue实例都会成为它的。也就是说我们整个项目中，只有一个。，构造函数的方式来创建实例。

vue2事件总线event bus。

传递和接收方式不同外显式query会很明显的跟在新的url上，而隐式params不会隐式params在刷新后可能会消失，我们可以在它存在的时候存如缓存中，如localstorage，而query不会隐式params比显式query相对而言更安全，不会将参数直接暴露给用户。

因此，在v-bind 用于 style 时，Vue.js 专门增强了它。v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。值得一提的是 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。（3）甚至我们可以在数组中用三元运算符，你也想根据条件切换列表中的 class，可以用三元表达式。（2）我们可以把一个数组传给 v-bind:class，以应用一个 class 列表。

在 Vue2 中， v-model其实是一个语法糖，它背后本质上是包含两个操作：1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件在 Vue3 中, 在自定义组件上使用v-model, 在vue2的基础上还相当于传递一个modelValue属性， 同时触发一个。

相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。：专注于修改State，理论上是修改State的唯一途径。：可以异步，但不能直接操作State。基于流程顺序，二者扮演不同的角色。角色不同，二者有不同的限制。：业务代码、异步请求。

确实是如此——如果您的应用够简单，您最好不要使用 Vuex。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。是存储的单一状态，是存储的基本数据。

所以，只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性。Object.defineProperty()针对的是对象的某个属性，而且这个操作在vue的初始化阶段就完成了，所以新增的属性无法监听，通过set方法新增对象就相当于初始化阶段的数据响应式处理。调用数组的pop、push、shift、unshift、splice、sort、reverse等方法时是可以监听到数组的变化的vue内部相当于重写了数组的原型，劫持了这七个方法。但是注意：数组中的元素是引用类型时是会被监听的。

的diff算法是基于snabbdom改造过来的，仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新。因为跨层级的操作是非常少的，忽略不计，这样时间复杂度就从O(n3)变成O(n)。因为虚拟dom是一个普通的javascript对象，故他不单单只能允许在浏览器端，渲染出来的虚拟dom可同时在node环境下或者weex的app环境下允许。然后用新的对象树和旧的对象树进行比较，记录两棵树差异。把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。

Vue会通过Object.defineProperty对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要Vue来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止Vue劫持我们的数据呢？可以通过Object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。

中v-if不能和v-for一起使用的原因是v-for的优先级比v-if高，一起使用会造成性能浪费。解决方案有两种，把v-if放在v-for的外层或者把需要v-for的属性先从计算属性中过滤一次。更新了v-if和v-for的优先级，使v-if的优先级高于v-for。2.v-if和v-for的优先级问题在。

父组件beforeCreate => 父组件created => 父组件beforeMount => 子组件beforeCreate => 子组件created => 子组件beforeMount => 子组件mounted => 父组件mounted。父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。

内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。这个钩子函数获取的数据是更新后的数据，生成新的虚拟dom，跟上一次的虚拟dom结构进行比较，比较出来差异（diff算法）后再渲染真实dom，当数据引发dom重新渲染的时候，在updated钩子函数里面就可以获取最新的真实dom了。vue 实例的 $el 和 data 都已初始化，dom节点马上要被渲染出来了，但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。

1.query使用path和name传参跳转都可以，而params只能使用name传参跳转。2.params不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。3.query相当于get请求，而params相当于post请求query传过来的参数会显示到地址栏中 而params传过来的参数不会显示到地址栏中 4.接受参数的时候用this.$route.params.name或者this.$route.query.name

它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。它不会追踪任何在回调中访问到的东西。会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而。默认第一次加载不执行回调函数，如果需要第一次加载不执行回调函数，添加。根据现有的依赖数据，推导计算出来一个新的数据，在每次监听的值发生变化的时候都会执行回调。是监听一个值的变化，然后执行对应的回调。

这里我因为之前就设置了所以上面图片中第一个本来就有选项"vue"，如果你们出现如上这样的话我们就成功了，敲下回车。好了本篇文章就到这里了，喜欢的话可以关注我，会持续更新的，有错误欢迎大家指出，大家可以在我这里互相讨论学习，一起进步。文件-->首选项-->配置用户代码片段-->点击新建代码片段--取名vue.json 确定。然后我们就可以在以vue为后缀的文件里输入“vue”，就可以迅速打出vue的模板了。进入到如图页面以后，复制下面代码到如上图对应位置(这里是我用的模板)这样的话其实已经带一个默认了。...

使用强制清理npm缓存：npm cache clean --force。使用vue ui启动项目后报这个错误。

小伙伴们可能疑问vue3已经有了那么久了为什么还要介绍vue2，介绍vue2的原因是因为公司有些老项目还是使用的vue2,除此之外在中只是不支持IE8及一下版本,Vue的响应式原理是基于es5的Object.defineProperty的，而这个方法不支持ie8及以下的版本，vue2有着较好的兼容性。......

不绑定key属性1.当vue中使用 v-for 更新已经渲染过的元素列表时,默认用"就地复用"策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。2.如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，此状态下的key值发生变化，但相应的虚拟节点不会发生变化，这种是vue的默认机制，就地更新，.........