Z_hai_yan的博客

在下次DO更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM，vue在更新DOM时是异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新使用场景：修改数据之后，可以立即获取修改后的数据，主要体现在beforeCreat和update两个生命周期中...

keep-alive是动态组件，他是vue的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染DOM，作用是缓存组件内部状态。避免重新渲染，不会出现在父组件中

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。主要分为三部分：observer主要是负责对Vue数据进行数据劫持，使其数据拥有get和set方法Compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数watcher负责数据监听，当数据发生改变通知订阅者，调用视图更新函数更新视图...

什么是导航守卫：概念：导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作一、全局守卫router.beforeEach（全局前置守卫）router.afterEach（全局后置守卫）二、路由独享守卫beforeEnter(给单独的路由加)三、组件内守卫beforeRouteEnter(进入该路由时执行)beforeRouteUpdate（该路由参数更新时执行）beforeRouteLeave(离开该路由时执行)执行顺序：1.导航被触发2.在失活的组件

1.创建beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用created() 最早开始使用 data和methods中数据的钩子2.挂载beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地mounted()dom已经渲染完毕 页面和内存的数据已经同步3.更新beforeUpdate() 当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的updated() 数据更新完成以后触发的方法，DOM节点已经

v-model：用来实现双向绑定v-for：用于数据循环v-show：显示内容（dom元素的display=block/none来控制元素的显示隐藏）v-hide：显示隐藏v-if：显示隐藏（dom元素的删除、添加）v-bind：动态绑定v-on：给元素绑定事件v-text：解析文本v-html：解析html元素v-cloak 防止闪烁v-once 进入页面时 只渲染一次...

如果组件中data不是一个函数，首先vue是会报错的，因为它的内部规范组件中的data必须是个函数，组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，构造data时会将其作为工厂函数都会返回全新data对象...

1.开发语言的区别小程序的开发语言是javascript普通网页的开发语言是：HTML+CSS+JavaScript/Jquery2.开发者面对的运行环境的区别小程序开发中需要面对两大操作系统：iOS和Android的微信客户端，以及用于辅助开发的小程序开发者工具网页开发中需要面对各种各样的浏览器3.逻辑层和渲染层的区别小程序的逻辑层和渲染层是分开的，分别运行在不同线程，逻辑层是运行在JSCore中，没有完整的浏览器对象，所以缺少相关的DOM API和BOM API普通网页开发渲染线程和脚

function Watcher(vm, exp, cb) {//在watcher的实例上保存回调函数this.cb = cb; //用于更新界面的回调函数this.vm = vm; //MVVM的实例vmthis.exp = exp; //对应的表达式this.depIds = {}; //n个相关的dep的容器this.value = this.get(); //初始化获取当前表达式对应的value}Watcher.prototype = {update: function() {t

function Observer(data) {//在Observer实例上暂存datathis.data = data;this.walk(data);}Observer.prototype = {walk: function(data) {var me = this;//对data里所有的属性名进行遍历Object.keys(data).forEach(function(key) {me.convert(key, data[key]);});},convert: functi

function MVVM(options) { //给实例新增$options属性,且把传递过来的参数进行暂存 this.$options = options; //在实例上新增_data 保存传递过来的data数据 var data = this._data = this.$options.data; //暂存this var me = this; //通过Object.keys取出data中每一项数据的属性名,然后遍历 O

function Compile(el, vm) { this.$vm = vm;//vm 是MVVM的实例 // el == "#app" 判断当前用户传递的el是元素节点还是选择器,如果是元素节点则直接保存到$el中，如果不是 则根据选择器 去查找对应的元素 然后保存 this.$el = this.isElementNode(el) ? el : document.querySelector(el);//确定元素是否真正存在 if (this.$el) {//#

项目概述：一款购物商城，是一个标准的vue框架实现项目，包含vue框架中的很多功能项目所用时间：一周半项目难点分析以及解决方式描述：商品分类先获取分类的标题数据，获取到的标题里没有全部，自己写个全部放进去，点击不同的标题调用不同接口弹框控制点击详情页的喜欢或者加入购物车，进行鉴权，判断用户是否登录，如果没有登录，就弹出登录的弹框让用户登录后再进行相应的操作购物车需要用到计算属性，用来计算商品的数量和总价，通过监听用户添加数量来直接改变商品的数量和价格路由鉴权在router/index.

所用技术栈：axios的封装、API的封装、vue-router、element-ui、echarts整体项目技术难点：商品管理、权限、分类参数、面包屑的封装axios的封装//1. 导入axios对象import axios from "axios";//2. 创建对象实例，create方法const Server = axios.create({ //请求接口的基础地址 baseURL: 'https://www.liulongbin.top:8888/api/priva

项目模块分析：用户管理模块、权限管理模块、商品管理模块、订单管理模块、数据统计模块各模块技术点：用户管理模块登录/退出、状态切换、编辑、分页、分配角色、面包屑导航切换权限管理模块添加角色、分配权限、权限展示、编辑、删除权限、面包屑导航切换商品管理模块添加商品、编辑、分页、添加参数、添加属性、选择分类、添加分类订单管理模块数据渲染、分页数据统计模块echarts图表、数据渲染用户管理模块展示：权限管理模块展示：商品管理模块展示：订单管理模块展示：数据统计模块效果

1.vue组件中为什么data必须是一个函数如果组件中data不是一个函数，首先vue是会报错的，因为它的内部规范组件中的data必须是个函数，组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，构造data时会将其作为工厂函数都会返回全新data对象2.vue常用的指令v-model：用来实现双向绑定v-for：用于数据循环v-show：显示内容（dom元素的display=block/none来控制元素的显示隐藏）v-hide：

1. 父传子父组件是通过props属性给子组件通信的父组件代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :msg="msg"></son> </div> </template> <script> import son from './son' //引入子组件 export defa

什么是导航守卫：概念：导航守卫又称路由守卫，实时监控路由跳转时的过程，在路由跳转的各个过程执行相应的操作，类似于生命周期函数，在开发过程中经常被使用，比如用户点击一个页面，如果未登录就调到登录页面，已登录就让用户正常进入。分为三种：一、全局守卫 分为三种：router.beforeEach（全局前置守卫）router.beforeResolve（全局解析守卫）router.afterEach（全局后置守卫）例：二、路由独享守卫beforeEnter(给单独的路由加

1.首先创建一个error页面，挂载error页面的路由，代码如下2.然后找到配置axios时写的响应拦截器，写入报错时，跳转至报错页面，代码如下3.效果展示

1.写一个组件，然后在export default中给当前组件起一个名字2.在main.js中写入以下代码3.在别的组件中，直接使用

首先需要封装axios1.在src路径下创建utils文件夹，然后创建require.js2.require.js代码如下,（按需求更改）//1. 导入axios对象import axios from "axios";//2. 创建对象实例，create方法const Server = axios.create({ //请求接口的基础地址 baseURL: 'http://39.100.7.70:81/', //设置超时时间 timeout: 4000 })

<div class="banner"> <el-carousel height="460px" :interval="5000" arrow="always"> <el-carousel-item v-for="(item,index) in banner" :key="index"> <img :src="'http://106.15.179.105:3000/'+item.imgPath" alt="">.

打包根目录创建vue.config.js文件module.exports = { publicPath:'./'}cmdvue ui进入可视化工具先启动项目启动App停止运行 ，再运行build最后去dist 里index.html打开预览优化console.log强制隐藏console.log（在index.html里面写入） <script> console.log() = function(){

用于搜索商品名<template> <div> <input type="text" placeholder="商品名称" v-model="shop_name" /> <table cellspacing="0"> <tr class="tableHead"> <th>编号</th> <th>名称</th> <t

报错如下：Refused to apply style from 'http://127.0.0.1:5500/css/chunk-43aa77e1.33bcbef1.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Failed to load resource: the server responded with