野生松

vue.extendextend 的作用是继承当前的Vue类，传入一个extendOption生成一个新的构造函数。在extend的时候会进行 mergeOption，融合Vue原型上的 baseOption，它是 Vue 的继承。所以extend出来的子类除了写正常的option之外，还可以写HTML，而且能使用v-model、keep-alive等全局性的组件。并进行挂载作用：是生成组件类在挂载全局组件和设置了components属性的时候会使用到。在生成DOM的时候会new 实例化挂载。（

Vue-cli4.0 搭建项目时配置Eslint当搭建项目选择完eslint之后，有个配置会问你更新换将单独配置的文件放到pakage.json还是放在单独的文件，如果是这样选择（单独生成一个文件）：最后会生成个.eslintrc.js的文件如下（推荐选择这个）：module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', // 这一步

我们都知道Vue在视图更新采用的是异步更新策略，简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件中的所有数据变化完成之后，再统一进行视图更新。官网给出的$nextTick的用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。说到更新，那肯定要提到 Watcher，我们来看源码：// 以下是我精简过的代码// 初始化时this.deep = this.user = this.lazy = this.sync = false

Vue中Watch的源码相比于Compute的源码实现简单了很多，以下是我的学习笔记：一、初始化1、初始Vue时会通过initState方法，在代码中进行opts.watch字段的判断，从而进行initState方法对Watch进行初始化。（和Compute的一样）。// 部分实现function Vue(){ ... 其他处理 initState(this) ...解析模板，生成DOM 插入页面}function initState(vm) { ...

一直都在网上查阅关于Compute源码分析的文章，但是看起来都挺费劲的。以下是我的一些学习笔记：1、初始Vue时会通过initState方法，在代码中进行opts.computed字段的判断，从而进行initComputed方法对compute进行初始化。function Vue(){ ... 其他处理 initState(this) ...解析模板，生成DOM 插入页面}function initState(vm) { var opts =

每当我们使用 webpack 打包项目代码的时候，你可能需要关注一下打包生成的每个 js 文件的大小以及其包含的内容，这对于优化项目打包速度和提升页面加载性能都有十分大的帮助。这里我们推荐使用webpack-bundle-analyzer这一款 webpack 插件来进行包文件的分析，下面我们就来介绍下其配置和使用方法。/* vue.config.js */const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').Bund..

我们可以使用alias将复杂的文件路径定义成一个变量来访问；在不使用 alias 的项目中，我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径，比如像这样：import xx from '../../../../xx.vue'这样就会出现一个问题：一旦相对层次结构较深，我们就很难去定位所引入文件的具体位置。在 CLI 3.x 中我们无法直接操作 webpack 的配置文件，我们需要通过 chainWebpack 来进行间接修改，代码如下：/* vue.config.j

在v-model上用Vuex中state的值：<input v-model="message">// ...computed: { message: { get () { return this.$store.state.message }, set (value) { this.$store.commit('updateMessage', value) }

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。watch: { obj: { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true, deep: true }}优化：我们可以使用字符串的形式监听wat

router.push中如果提供了 path，params 会被忽略。取而代之的是下面例子的做法，你需要提供路由的name或手写完整的带有参数的path。const userId = '123'router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/123// 这里的 params 不生效router...

思路就是前端写好全部的菜单信息，通过接口从后端拿相应权限。拿到之后使用全局守卫结合addRoute实现路由权限控制。在日常开发中路由权限控制是经常遇到的，以下是我的部分代码实现：名词解释：全局守卫:全局路由守卫每次都判断用户是否已经登录，没有登录则跳到登录页。已经登录(已经取得后台返回的用户的权限信息(角色之类的))，则判断当前要跳转的路由，用户是否有权限访问(根据路由名称到全部路由里找到对应的路由)。没有权限则跳到事先定义好的界面(403,404之类的)。addRoute:addR

Vue父组件对子组件生命周期的监听方法一：// Parent.vue<Child @mounted="doSomething"/> // Child.vuemounted() { this.$emit("mounted");}方法二：// Parent.vue<Child @hook:mounted="doSomething" ></Child>doSomething() { console.log('父组件监听到

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：加载渲染过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted子组件更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated ->

众所周知由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength为了解决这些问题，Vue 提供了以下操作方法：// Vue.setVue.set(vm.items, indexOfItem, newValue)// vm.$set，Vue.set的一个别名vm.$set(vm.items,

全局守卫vue-router全局有三个守卫：router.beforeEach 全局前置守卫 进入路由之前 router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子 进入路由之后用法： // main.js 入口文件 // to和from是将要进入和将要离开的路由对象this.$route // next:Function 这个参数是个函数，且必须调用，否则

定义：vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs: false。这个很不好理解，这里我直接用代码说明：...

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。实现gzip压缩需要安装compression-webpack-plugin包。在vue.config.js配置，直接上代码：const CompressionPlugin = require('compression-webpa...

现在大家开发一般都会用到一些UI库，但是这些UI库的组件样式一般都是写好的。这样导致我们可能会需要修改一些样式。在Vue开发中，我们vue文件的样式都是写在<style lang="less" scoped></style>标签中的，加scoped是为了使得样式只在当前页面有效。使用scoped之后，实际的html中都会被加上[data-v-xxx]这个属性。但是第三方...

可以根据自身实际情况套模板更改：/**axios封装 * 请求拦截、相应拦截、错误统一处理 */import axios from 'axios';import QS from 'qs';import { Toast } from 'vant';import store from '../store/index'// 环境的切换if (process.env.NODE_ENV...

一、proxyTable// 配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。proxyTable: { // 用‘/api’开头，代理所有请求到目标服务器 '/api': { target: 'http:xxx.com', // 目标接口域名 changeOrigin: true, // 是否启用...

computed当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed<template>{{fullName}}</template>export default { data(){ return { firstName: 'xie', lastName: 'y...

vm.$el获取Vue实例关联的DOM元素vm.$data获取Vue实例的data选项（对象）vm.$options获取Vue实例的除了data里的其它属性vm.$refs获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个）...

我们知道，在做 Vue 大型项目时，可以使用 Vuex 做状态管理，它是一个专为 Vue.js 开发的状态管理模式，用于集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。但是由于Vuex的包很大，一些小型项目，组件之间的通信其实没有必要用Vuex。与ref和$parent / $children不同的是，ref和$parent / $children...

这些都是很基础，但又容易忽略的小知识点。一、正常的注册方法一个组件上的v-model默认会利用名为value的 prop 和名为input的事件。Vue.component('base-checkbox', { props: { checked: Boolean }, template: ` <input v-bind:val...

beforecreated：初始化了Vue的空的实例，data和method中的数据都未初始化created：这时候data和mothod都初始化好了。所以最早要调用method中的方法，可以写在created中beforeMount：这时候Vue中的指令进行执行最终生成编译好的字符串模板并寄存在了虚拟的dom中，并没有真正生成到页面上mounted：将在上一个阶段编...

一、双向绑定的原理vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它...