Vue
关注
分享
扫一扫
目前为逐步学习和整理，可能还不够系统
Novice-XiaoSong
这个作者很懒，什么都没留下…
展开
-
vue key属性详解
key的作用？key使用id与index的区别？一、key的作用作为一个DOM节点的标识值，结合Diff算法可以实现对节点的复用。(key相同的节点会被复用)只有当key(或节点类型)发生改变时，才会触发节点的重新渲染。否则Vue将会复用之前的节点，通过改变节点的属性来实现节点的更新。二、key使用id与index的区别不推荐使用index作为key，因为这种做法会导致某些节点被错误地原地复用，具体如下性能损耗：列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当..原创 2020-11-22 20:47:10 · 1216 阅读 · 0 评论 -
vue 生命周期
一、生命周期概览二、父子组件生命周期执行顺序创建父：beforeCreate父：created父：beforeMount子：beforeCreate子：created子：beforeMount子：Mounted父：Mounted销毁父：beforeDestory子：beforeDestroy子：destroyed父：destroyed...原创 2020-11-19 23:25:20 · 125 阅读 · 0 评论 -
vue Vue实例绑定DOM元素
挂载实例后，template 或 render 将会替换以 el 为根节点的整棵DOM子树若 template 未定义或 template 为空字符串，且没有定义 render 函数时，Vue实例绑定的DOM子树不会被替换<body> <div id='app'> <span>domDiv</span> </div></body>替换执行下边代码后new Vue({ el: '#app', templa.原创 2020-11-19 22:27:12 · 1189 阅读 · 0 评论 -
vue 运行时创建Vue实例
// 从运行时的编译文件中获取Vue实例import Vue from 'vue/dist/vue.esm.js'原创 2020-11-19 21:55:40 · 116 阅读 · 0 评论 -
vue diff算法
概览图isSameNodefunction sameVnode (a, b) { return ( // key值 a.key === b.key && // 标签名 a.tag === b.tag && // 是否为注释节点 a.isComment === b.isComment && // 是否都定义了data，data包含一些具体信息，例如onclick , style..原创 2020-11-19 11:57:41 · 235 阅读 · 0 评论 -
vue computed的缓存特性
概述：computed的计算属性有缓存机制，只有当其依赖的响应式数据发生变化时才会清空缓存重新计算结果其缓存机制本质是通过一个dirty属性控制的，只有dirty为true时才会重新计算结果替换缓存。dirty只有当其响应式数据发送变化时才会设置为true，重新计算后会再次被设置为false测试<template> <div> <button @click="changeValue">更新Value</button> <butt.原创 2020-11-19 11:01:42 · 5391 阅读 · 1 评论 -
vue $nextTick
概述： this.$nextTick() 将回调延迟到下次 DOM 更新循环之后执行。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。使用场景： 修改模型data中的数据后，需要在视图中获取该依赖，为了正确获取到更新后的内容，需要使用 this.$nextTick() 等待下次DOM更新后才能获取正确的值。初识化vue实例时，在mounted阶段后，也就是挂载DOM后才会执行第一个nextTick的回调{ ... created(){.转载 2020-11-14 17:03:05 · 203 阅读 · 0 评论 -
vue 路由的hash模式和history模式
这两种模式都是属于前端路由。前端路由，顾名思义，前端使用的路由，路由不会触发向后端请求的操作，而只是为了管理前端页面。当路由路径改变时，加载相应的内容。一、hash模式url中会带有#本质是使用window.onhashchange来监听url的变化（本质是#后边内容的变化），并根据url的不同加载相应内容二、history模式url不含#，比较优雅本质是使用H5引入的window.history那一套东西来实现（1）length: 当前历史记录列表的长度（2）state: 当前历.原创 2020-11-15 18:20:17 · 299 阅读 · 0 评论 -
vue 路由器vue-router
区分$router: 路由器，用来管理路由的，例如 push 进行路由跳转$route: 当前页面路由，用来获取当前页面的路由信息的，例如$route.path, $route.params, $route.query…一、Vue中引入vue-router安装vue-routernpm install vue-router全局路由管理（1）src 文件夹家中创建 router/index.js 文件（2）index.js 中引入 vue-router ，创建路由器实例im.原创 2020-11-15 18:20:42 · 349 阅读 · 0 评论 -
vue 组件状态缓存，keep-alive
在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.一、设置include、exclude<keep-alive include='page1'> <component1 /> <component2 /> ... <!-- component中 n.转载 2020-11-15 21:22:45 · 601 阅读 · 1 评论 -
vue axios
vue中官方的请求方法一、基本用法axios(options) 或 axios.request(options)（1）这两个是一样的（2）options 可以配置 method, headers, url, data 等属性（3）返回结果是一个 Promise 实例指定请求方法（1）axios.get(url, options?)（2）axios.post(url, data, options?)（3）axios.head(url, options?)（4）axios.put.原创 2020-11-17 12:46:42 · 161 阅读 · 0 评论 -
vue plugin的简单使用
Vue.mixin() 在全局Vue中混入一些操作，这些操作会在所有Vue实例中触发// main.jsVue.mixin({ // 这里可以使用一些钩子函数 created(){ console.warn('mixin') }})Vue.use 用于在全局Vue中安装依赖// main.jsimport Vue from 'vue'const myPlugin{ install(Vue){ // do something // Vue.use(_plugin)..原创 2020-11-18 00:03:56 · 943 阅读 · 0 评论