wuxian_wj的博客

keep-alive原理什么是keep-alive​ <keep-alive>是vue实现的一个内置组件，是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive的作用所以我们可以把一些不常变动的组件或者需要缓存的组件用<keep-alive>包裹起来，这样keep-alive就会帮我们把这些组件保存在内存中，而不是直接销毁，这样就可以保留组件的状态并且避免多次重新渲染。属性&l

Vuex注入Vuex是作为vue的一个插件而存在的，它只能应用在vue中，是因为其高度依赖vue中的computed依赖检测系统以及其插件系统。在vue中，每一个插件都需要一个公开的install方法，在vuex中，它的install方法中调用了applyMixin方法。这个方法的主要作用是在所有组件的beforeCreate生命周期中注入this.$store这样一个对象。源码如下：// src/store.jsexport function install (_Vue) { if (Vue

什么是vue模板编译在使用vue开发过程中，我们把写在<template></template>标签中的内容称之为模板。除去一些html原生的内容还有solt、v-if、v-on、{{}}这些原生html不存在的语法，但是仍然可别浏览器识别，其中最重要的一个原因就是vue的模板编译了。Vue会把用户在<template> </template>标签中写的内容进行编译，找出原生的html和非原生的html内容，经过处理生成渲染函数，也就是render函数

之前有整理过Vue响应式原理，响应式主要的效果是数据改变了就会引起页面修改。关于v-model我们也不陌生，vue的双向绑定指令，页面修改会引起数据修改，数据修改页面也会跟着改变。我们直到数据->页面是由vue的响应式原理实现的，那么该怎么做到页面->数据的修改呢？表单绑定v-model一般我们是在表单元素上进行使用，因为视图能影响数据，本质上是这个视图需要可交互，因此表单是实现这一交互的前提。表单的使用是以<input>、<textarea>、<select&

本篇主要讲vuex的模块化，虽然官网已经讲得比较细致了，但是在实践的时候还是踩了不少坑。今天就在这里把模块化使用过程中的细节都讲清楚，方便大家学习，也方便自己以后复习。1.Vuex简单介绍1.1 Vuex是什么官方：Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（即通过提交mutation来更新状态）Vuex是适用于Vue项目开发时使用的状态管理工具。把组件中的共享状态抽取出来，以一个全局单例模式管理

前言Vue中不管是每个页面，还是从多个页面中抽取出来的公共代码封装，都属于组件。在Vue项目中组件开发是必不可少的。那么组件与组件之间必定不是完全分离的，大多业务组件之间涉及到数据交互，组件通信必不可少。那么在Vue项目中都有哪些通信方式，应用场景分别是怎么样的呢？为什么要用到组件通信组件是Vue最强大的功能之一，组件实例的作用域是相互独立的，这意味着不同组件之间的数据无法相互引用。所有组件都无法直接访问其他组件的data、methods、computed，每个组件都是一个局部作用域，这样做的目的是为

今天看到一个问题v-if、v-show有什么区别。有什么区别呢，脑子中只有一个v-if是对节点的删除增加做到节点的出现和隐藏的，v-show是通过添加和取消display: none，来实现可见不可见的。其他呢，想不起来了，赶紧全面了解整理一下吧。v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>也可以搭配v-else使用，添加一个else块。

Vue router 介绍路由什么是SPASPA是singel page web application的简称，译为单页面Web应用。简单的说SPA就是一个WEB项目只有一个HTML页面，一旦页面加载完成，SPA不会因为用户的操作二进行页面的重新加载或跳转。取而代之的是利用JS动态的变化HTML的内容，从而模拟多个视图间的跳转，前端路由与后端路由后端路由路由这个概念最先是后端出现的。路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能

目录1. 数据代理/数据劫持 Object.defineProperty()1.1 Object.defineProperty()1.1.1 语法1.1.2 使用2. 收集依赖与派发更新2.1 依赖2.2 依赖收集2.3 派发更新3. 代码整理3.1 Dep类3.2 window.target3.3 update方法3.4 targetStack总结Vue2 与 Vue3 响应式区别1. 数据代理/数据劫持 Object.de...

key

1. data中数据响应式问题当一个 Vue 实例被创建时，它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。但是只有当实例被创建时就已经存在于data中的属性才是响应式的。也就是说如果你对于某个data中的对象添加一个新的属性，那么对于该属性的修改将不会响应式的显示。<d...