Vue2笔记

时间：2023-03-31 18:19:28 vue.js

数据驱动：将数据与视图相关联，数据变化时自动更新视图。单页面应用VS多用途应用1）多页面应用：优点：首屏时间快，SEO效果好缺点：页面切换慢2）单页面应用：优点：页面切换快前提是依赖条件不变，第一次计算的结果会缓存起来，后面使用时直接使用第一次计算的结果。当计算属性的依赖属性的值发生变化时，该属性的值会自动更新，相关的DOM部分也会自动同步更新。1）计算属性有两种形式：函数形式和对象形式，有get()和set()方法计算：{url:{get(){return`${this.protocol}//${this.host}`;},set(val){consttmp=val.split('//');如果(tmp.length>1){this.protocol=tmp[0];this.host=tmp[1];}}}}2)计算属性使用闭包传递计算参数：{url(){returnfunction(hash){return`${this.protocol}//${this.host}#${hash}`;}}}listenDevice1.Functionform2.Objectformwatch:{location:{immediate:true,//初始化期间执行deep:true,//递归（深度）遍历handler(newVal,oldVal){this.url=`${newVal.protocol}//${newVal.host}`;}}}computed和watch的区别computed属性和listeners的本质是Watcher的实例。Computed是基于响应式依赖进行缓存的，只有当相关的响应式依赖发生变化时才会重新计算。当依赖关系保持不变时，计算属性使用缓存的最后一次计算结果，而无需重复执行监视。当数据发生变化时需要执行异步或昂贵的操作时，请使用手表。v-if和v-showv-if是“真”条件渲染，因为它将确保条件块内的事件侦听器和子组件在切换期间被适当地销毁和重新创建。v-if动态增删节点（DOM），v-show控制CSS属性（display）切换；v-if是惰性的，初始条件为假时不会参与模板编译；v-show会一直参与渲染；v-if会缓存编译结果。当v-if条件为真时，vue会编译成虚拟DOM并缓存起来，下次条件渲染后直接使用。v-if具有更高的切换开销，而v-show具有更高的初始渲染开销。所以，如果你需要非常频繁地切换，最好使用v-show，如果条件在运行时很少改变，最好使用v-if。v-if中的keyVue将尽可能高效地渲染元素，通常会重用现有元素而不是从头开始渲染。为元素添加一个具有唯一值的key属性，表明该元素是完全独立的，不要重复使用它们。用户名Emailv-if和v-for在同一个元素上，v-for优先级高比v-if，即先执行遍历，再执行判断。如果条件出现在循环内部，可以使用计算属性过滤掉那些不需要提前显示的项目。v-for中键值的作用：作为同级元素的标识，提高更新效率。key值的作用首先要了解vue更新DOM的机制，即Diff算法。该算法有三个假设，其中一个是同一层级的元素可以通过唯一的id值来区分，将key值作为id值，以便vue在更新（包括插入、删除、添加）时能够识别,交换等）到底是哪个虚拟DOM发生了变化，而不是一般的批量更新。用作分隔符是因为它更接近JavaScript迭代器的语法：

变异方法和非变异方法Vue重写了监听数组的change方法，会改变原数组push(),pop(),unshift(),shift(),splice(),reverse(),sort()非变异方法：无改变原始数组，并始终返回一个新数组filter(),concat()和slice()当使用非变异方法时，可以用新数组替换旧数组Event方法：{add(step,event){this.count+=step;控制台日志（事件）；//访问原生事件对象}}事件修饰符：.stop//防止事件冒泡.prevent//防止浏览器的默认行为。self//只有当触发事件（event.target）的对象是它自己时才执行。capture//监听器采用事件捕获模型。once//触发一次后移除监听器。//告诉浏览器监听器是“活跃的”，不会阻止浏览器的默认行为，让滑动更流畅。特别是可以提高移动终端的性能。数据双向绑定(v-model)v-model指令用于在input、select、text、checkbox、radio和其他表单控件元素上创建双向数据绑定。v-model是句法糖，在用户输入事件中更新数据。给v-model添加.lazy修饰符会监听change事件。native修饰符用于监听组件根元素上的本地事件//将本地事件绑定到组件。复用性高，减少重复开发，即一处开发，多处使用。单向数据流：父组件传值给子组件1）是属性，table、ul、ol、select中使用了一些HTML元素，如

//行组件

//type为组件名变量组件间通信1）父子组件通信：props和$emit2）兄弟组件通信:事件总线（EventBus）$emit触发事件，$on监听，$off()用于删除非父子组件之间传值的事件监听（Bus|Bus|PublishSubscribeMode|ObserverMode）//eventBus.jsVue.prototype.eventBus=newVue();//componentAthis.eventBus.$emit('send',text);//触发//组件Bthis.eventBus.$on('send',(text)=>{//监听this.text=text;});3）Vuex：状态管理工具集中状态管理，管理和操作全局共享状态数据。使用场景：1）多个视图依赖同一个状态（state）2）多个视图需要改变同一个状态（state）store是managerstate：statemutations：改变Vuexstore中状态的唯一方法，synchronizeactions:异步getters：类似于计算属性组件，不允许直接修改store中的state，使用commit函数提交mutation方法修改数据。slot作为我们要插入的内容的占位符1)slot

title

Saysomething

2)命名槽//页面组件默认内容

//使用页面组件

页面内容...

3)Scopeslot(slotwithdata)//常用于表格中有时允许槽内容仅在子组件中访问数据是有用的。这是一种常见的情况，当组件用于呈现项目数组并且我们希望能够自定义每个项目的呈现方式时。//使用范围槽

可以参考iView组件库自定义命令完整命令：v-name:foo.a="expression"其中name：命令名，foo：参数，a：修饰符，表达式：表达式。1)全局注册回调函数形式Vue.directive('test',function(el,bindings,vnode){console.log(el,bindings);})对象形式--hookfunctionVue.directive('test',{bind(el,bindings,vnode){//初始化数据console.log('bind')},inserted(el,bindings,vnode){//获取父元素的DOMconsole.log('inserted')},update(el,bindings,vnode){//监听绑定组件的变化console.log('update');},componentUpdated(el,bindings,vnode){//监听绑定组件的变化console.log('componentUpdated');},unbind(el,bindings,vnode){//触发console.log('unbind');},})2)localregistrationdirectives:{test:{//同上}}3)长按指令//长按指令定义Vue.directive('long-press',function(el,bindings){lettimer=null;constvalue=bindings.value;constduration=value.duration||700;//长按时间constfn=value.callback;//回调函数const_this=this;el.addEventListener('touchstart',运行);el.addEventListener('touchend',stop);el.addEventListener('touchmove',停止);functionrun(){if(timer===null){timer=setTimeout(()=>{fn&&fn.call(_this,el,value);clearTimeout(timer);},duration);}}functionstop(){//取消——清除定时器clearTimeout(timer);定时器=空；}})//长按命令使用//使用值作为对象传递参数给长按命令

handleLongPress(el,value){console.log(value);//dosth}life循环一个事物从诞生，到发展，到继续，直到最后的销毁过程，调用它的生命周期实例创建=>挂载=>数据变更=>更新视图=>销毁1)$nextTick([callback])设置一个Callback，视图不会在下一次DOM更新后执行数据更改后立即更新。2)$forceUpdate()导致实例重新渲染并更新视图。3）生命周期钩子：beforeCreate：组件实例还没有创建created：创建实例，初始化数据（$data），配置完成，常用于异步获取数据。:挂载完成，dom已经创建，可以用来获取access数据和dom元素。应用：eg：在上报页面访问数beforeUpdate时，虚拟DOM已经生成在销毁之前，可以用于一些时机取消服务器或者订阅销毁：销毁完成渲染1)elmount2)templatetemplate3)customrender无论执行哪种渲染方式，render函数都会在$mount时产生被执行。Render函数调用_render=>虚拟DOM调用_update=>真实DOM模板编译过程：parse生成AST语法树，optimize优化，generate生成render函数代码。//ASTabstractsyntaxtreeparse的作用是将模板内容转化为AST语法树，方便程序分析；optimize的作用是通过标记静态节点来优化语法树；generate生成render函数的代码，是字符串类型。模板编译就是生成render函数，render函数是不会执行的。Render生成一个虚拟DOM。DOM更新：渲染观察者的回调函数updateComponent实现DOMupdate_render生成虚拟DOM_update。通过比较虚拟DOM更新，只有当真实DOM数据发生变化时，渲染观察器才会被触发。Vue-Router在不向服务器发送请求的情况下更改URL。URL并进行相应的操作三种模式：hash、history、abstractabstract：适用于所有的JavaScript环境，比如在服务端使用Node.js。如果没有浏览器API，路由器将自动强制进入此模式。1)hashwindow.location.assign()window.location.replace()window.onhashchange//hashchange事件2)historywindow.history.pushState()window.history.replaceState()window.onpopstate//pushState和replaceState不会触发popstate事件history.pushState/history.replaceState不会触发popstate事件，只会改变url和历史记录。history模式使用真实路由，需要服务器重定向到首页。否则刷新浏览器还是会向服务器发送请求，报4043）hash和historyhash的区别：丑（#），hash会占用锚点功能，更好的兼容history：路由同后端，IE10以上，需要后端支持4)RouterAPI$router方法：$router.push()$router.replace()$router.go()$router.forward()$router.back()router.push/router.replace以不同的方式调用不同的底层API，一种改变真实的url路径，一种只改变hash。$route参数：$route.params--动态路由匹配参数$route.query--查询参数$route.hash--urlhash值$route.fullPath--url全路径$route.meta--与page关联的meta信息5)解析位置parseLocation(location){const{path,query,hash}=location;return`${path}?${parseQuery(query)}#${hash}`;}parseQuery(query){returnObject.keys(query).map(key=>{return`${key}=${查询[键]}`;}).join('&');}