weixin_小白鼠的博客

理解前端路由及实现方式，了解hash哈希模式和history历史模式两种路由的原理，原生实现哈希和历史模式路由，对比哈希模式路由和历史模式路由的不同；分析vue-router的实现方式

我们在使用UI组件库的时候为什么通过Vue.use()就可以使用了？了解Vue.use（）的基本原理，如何在vue中自己定义一个指令并在组件中使用，全局注册一个指令和定义组件内部的局部指令；了解vue中内置的指令是怎么定义的

M：模型 ==》data中的数据V：视图 ==》模板VM：视图模型 ==》Vue实例对象ViewModel是一个中间的桥梁将视图View与模型Model连接起来，ViewModel内部通过数据绑定，实现数据变化，视图发生更新变化，通过数据劫持实现的数据绑定；通过dom监听，实现事件触发,调用对应的回调函数，比如更新数据（数据变化了，视图就会更新–数据绑定）Vue 的设计也受到了MVVM的启发，View对应的是dom，它的ViewModel对应的式Vue实例，,Model对应的是data对象；通过数据劫持来实

什么时候使用Vuex：1）中大型单页应用，需要进行统一的状态管理，这个时候就可以考虑使用Vuex;2）组件之间共享的数据特点：响应式：数据改变的话，页面所有的地方都会改变；同一个vue实例，不同组件之间都共享同步存在内存：刷新就会丢失。

vue的生命周期，生命钩子的执行顺序，父子组件生命钩子函数的执行先后顺序；各个钩子函数中能干什么，有什么是不能做的；keep-alive与生命钩子函数；this.$nextTick的作用；生命钩子与请求

vue2和vue3中v-model的使用与变化；vue中怎么实现父组件与子组件的双向数据绑定；v-model事项双向数据绑定的基本原理；v-model不仅可以在input中使用，还可以在自定义组件中使用

目标效果：当访问的路径是need时就隐藏顶部的common组件具体问题：访问 http://localhost:8080/#/need，每次刷新页面顶部都会闪现一下蓝色的盒子（common.vue）相关路由：根组件App.vuecommon.vue是一个蓝色的盒子need.vue组件解决思路访问这个路由的时候,当前路由 route.name===‘name’，所以v-if=“false”;应当不会闪现；组件应该都不会被创建实际上每次初始化的时候，common组件都会渲染一次；方案1: 我想先将组件

vue组件及路由的缓存：全部路由的缓存，部分路由缓存；单个路由的缓存keep-alive的属性及使用注意

vue-cli的基本使用：怎么通过vue-cli快速搭建一个vue项目；怎么配置模式及环境变量；怎么获取环境变量；vue.config.js的配置，配置项的基本说明及使用，对应的webpack配置；怎么构建vue多页面应用

虚拟dom是什么：用来描述dom的js对象作用：vue在更新真实DOM前，虚拟dom会进行diff运算，比较更新前后虚拟DOM结构中的有差异的部分，然后采用异步更新队列的方式将差异的部分更新到真实DOM中，从而减少了最终要在真实DOM上执行的操作次数，提高了页面渲染的效率从模板到真实dom：模板 -> 进行编译 -> 成render函数 -> 虚拟dom -> 真实dom如果直接使用render函数，就省略了模板的编译过程，vue运行的更快render函数就是用于实现虚拟dom的使用render函数代替

目的：在关闭窗口时删除localStorage中的数据方法1：beforeDestroy中删除想要在组件销毁的时候删除localStorage中的变量，结果发现无效beforeDestroy在页面刷新的时候不会执行，但是在页面跳转的时候会执行（this.router.push,this.router.push,this.router.push,this.router.replace），但是关闭窗口的时候不会执行该强制关闭窗口的时候，浏览器都会在js执行的间隙立马中止所有后续js执行（vue的beforeD

问题：父组件通过props传递给子组件的值不是最新的场景：父组件通过props向子组件传递了一个数组info,父组发请求后更改数组info,此时通过this.$refs.childName来操作子组件的数组info的值并非最新的值代码详情：父组件：通过props向子组件传递了一个数组info当我点击父组件的按钮时，发请求获取了数据并赋值给了info数组，点击事件代码在下面（解决修改代码过程）子组件：通过props接收了父组件传过来的数组；它后一个方法，获取最新的数组值解决修改代码过程写法1：这是我一开始

vue.config.js或webpack.config.js中设置proxy代理解决生产环境跨域本地启动一个服务器,端口为9000node server.js server.js文件const http = require("http");const app = http.createServer((req, res) => { if (req.url === "/api/testCors") { res.end("i just wanna be cool");

vue-router路由传参的方式动态路由参数页面刷新，参数也不会丢失路由： { path: "/paramsPass/:id", component: () => import("../views/paramsPass.vue"), }跳转： jump(id) { this.$router.push({ path: `/paramsPass/${id}`, }); }url:http://localhos

vue-router打开新窗口的方法及跳转方式对比打开新窗口方法1： const routeUrl = this.$router.resolve({ path: "/targetUrl", query: { id: 96 }, }); window.open(routeUrl.href, "_blank"); },方法2： <router-link target="_blank" :to="{ pat

slot插槽插槽理解<slot name="mySlot"></slot>标签作为组件模板之中分发插槽，元素自身将被替换name属性，用于名命插槽slot标签给你留了一块地，你可以往里面放任何的东西；就像有人给你留了一大笔遗产，你可以用它来做你想干的事情父组件A：<template> <div> 组件A <defaultSlot> hello <h4>玛卡巴卡</h4&g

vue3中常用的Compositon APIsetup1》所有的组合API函数都在这里使用，只在初始化的时候执行一次；2》函数如果返回对象，对象中的属性和方法，模板中可以直接使用基本语法结构 setup(props,{attrs,slots,emit}){ return {} }setup的执行时机在beforeCreate之前执行一次由于在beforeCreate之前执行，所以this为undefined,也就不能通过this来访问data method compute

vue中mixin基本使用testMixin.js文件export const myMix = { data() { return { name: '三毛', } }, created() { console.log(3) }, mounted() { console.log(4) }, methods: { // 两个vue组件都引用了这个文件，一个vue组件触发这个方法，另外一个会执行吗 logNumbe

动态绑定属性1. style <div class="box" style="width:200px;height:200px" :style="flag ? 'background-color:green' : 'background-color:blue'" ></div> <button @click="flag = !flag">变色</button>2. class

vuex的基本使用安装vuexnpm install vuex --saveimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)vuex中的重要概念state用于存放变量mutations用于集中控制state中的变量只能进行同步操作且只有它能够直接操作state中的值actions用于执行异步操作，通过context对象可以调用mulation中的方法如果想要操作state，只能通过调用mutations中的

$nextTick学习官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。个人理解：vue是异步更新dom,所以当我们想要对修改后的dom进行操作的时候，就需要使用 $nextTick(()=>{})<template> <div> <div ref="message">{{ msg }}</div> <button @click="msgChange"&gt

created与mounted的执行顺序最近在工作中发现created 里面的代码不一定比mounted中的代码先执行，下面的代码打印结果是什么呢？export default { created() { console.log(1) this.printNum() console.log(3) }, mounted() { console.log(4) }, methods: { printNum() { se

methods computed watch的区别方法methods使用场景：某种条件下触发，比如点击，按下回车触发时机：不主动调用不会执行是否支持异步：支持异步操作初始化：初始化除非在（一般选择mounted 或created）中调用了才会执行计算属性computed使用场景：一个数据受多个是数据影响触发时机：有当他们依赖的数据发生改变时才触发；默认会走缓存，基于他们的响应式依赖缓存，基于data种声明过的或者父组件中传递过来，props中接收的值是否支持异步：不支持异步操作初始化：在

watch监听基本数据类型的监听最基础的用法，默认情况下<template> <div class="watch"> <input type="text" v-model="msg" /> <h4>{{ title }}</h4> </div></template><script>export default { data() { return {