Vue.js

关于Vue和VueComponent 一个重要的内置关系:VueComponent.prototype.proto===vue.prototype 为什么要有这个关系？ 让组件实例对象(vc)可以访间到Vue原型上的属性、方法. ref属性 1.被用来给元素或子组件注册引用信息(id的替代者) 2.应用在htm1标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">.....</h1>或<School ref="xxx"></School> 获取:this.$refs.xxx 配置项props 功能: 让组件接收外部传过来的数据 (1).传递数据: <Demo name="xxx"/> (2).接收数据: 第一种方式(只接收): props:['name'] 第二种方式(限制类型): props:{ name:String } 第三种方式(限制类型、限制必要性、指定默认值): props:{ name:{ type:String,//类型限制 required:true,//必要性 default:"JQF"//默认值 } } 备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告, 若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据. mixin(混入) 功能: 可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步：定义混合 const mixData={ data(){...} }, const mixMethods= { methods:{...} } 第二步：使用混入 (1).全局混入:Vue.mixin(xxx) (2).局部混入:mixins:[xxx'] 插件 功能:用于增强vue 本质:包含install方法的一个对象,install的第一个参数是vue,第二个以后的参数是插件使用者传递的数据。 定义插件: 对象.install = function (Vue, options) { //1....

Vue中支持的事件 资源事件 事件名称 何时触发 error 资源加载失败时。 abort 正在加载资源已经被中止时。 load 资源及其相关资源已完成加载。 beforeunload window，document 及其资源即将被卸载。 unload 文档或一个依赖资源正在被卸载。 网络事件 事件名称 何时触发 online 浏览器已获得网络访问。 offline 浏览器已失去网络访问。 焦点事件 事件名称 何时触发 focus 元素获得焦点（不会冒泡）。 blur 元素失去焦点（不会冒泡）。 WebSocket 事件 事件名称 何时触发 open WebSocket 连接已建立。 message 通过 WebSocket 接收到一条消息。 error WebSocket 连接异常被关闭（比如有些数据无法发送）。 close WebSocket 连接已关闭。 会话历史事件 事件名称 何时触发 pagehide A session history entry is being traversed from....

重定向后页面回退反复跳转bug 问题 在网易云项目时，由于Api所返回数据的问题，在Video搜索界面出现Mv的结果，这样就导致当点击的视频为Mv时，无法在Video页面利用传入的id参数渲染Video 解决办法 想到利用判断，在得到MV之后跳转到MV播放界面，也即重定向redirect： this.$router.push({ name: 'MvPlay', query: { id: this.id, } }) 但是，这就出现了页面回退之后又前进这样反复的BUG，于是想到replace，修改为： this.$router.replace({ name: 'MvPlay', query: { id: this.id, } }) 这样，在Video页面重定向到Mv页面后，不会留下在Video页面的历史，所以就不会出现上面的BUG了！

在网易云项目时，在歌手详情页点击相似的歌手跳转到query参数不同的另一个歌手详情页时，出现地址栏query参数变化，而页面却没有实时更新的现象，经过搜索找到以下解决方案： 方案一：watch监听路由 watch: { // 方法1 //监听路由是否变化 '$route' (to, from) { if(to.query.id !== from.query.id){ this.id = to.query.id; this.init();//重新加载数据 } } } //方法 2 设置路径变化时的处理函数 watch: { '$route': { handler: 'init', immediate: true } } 方案二：给router-view添加一个不同的key 给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。 <router-view :key="$route.fullpath"></router-view> 小洁🙎🏼‍♀️ 抽象问题描述：同一path的页面跳转时路由参数变化，但是组件没有对应的更新。 实际原因：主要是因为获取参数写在了created或者mounted路由钩子函数中，路由参数变化的时候，这个生命周期不会重新执行。

用vue.js写成的页面中，可能出现由于外部请求导致的页面展示阻塞现象，进而导致模板语法{{xxx}}直接展示在页面上，这其实跟页面加载的流程有关，整个页面加载的流程是： 解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造HTML DOM模型 -> 加载图片等外部文件 -> 页面加载完毕 所以，当HTML加载的时候，就会把{{}} 当成文本加载出来，只有当vue初始化完成后，才会把{{}}解析成vue的语法。 遇到这种情况有以下几种解决方案： 方案一(不推荐)：在head里面加入引入vue的script标签 如果把引入vue的script放到head里面，那页面就不会出现{{}}，因为在body之前，vue就已经引入进并且加载完成了。 方案二：v-text|v-html 使用v-text插入文字，使用v-html插入HTML结构，替换原本使用的模板语法{{xxx}} 方案三：template 使用<template>标签包裹要渲染的HTML结构，那么只有vue解析时才会展示出该结构 方案四：v-cloak指令 + CSS样式 标签上的v-cloak属性在被vue解析到时会自动去掉，那么我们可以利用CSS的属性选择器，给有v-cloak属性的元素设置display:none样式，那么，在加载HTML时自然不会显示{{xxx}}，而在vue解析时又会显示出来，问题得以解决！

1.vue会监视data中所有层次的数据. vue对于配置在data中的所有对象都会以key值作为目标进行监视，不论多少层，都会递归地为每一个key配置getter和setter(通过Object.defineProperty())。 相关阅读 MDN关于defineProperty的说明 2.如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据，即在data中提前配置。 (1).对象中后追加的属性,Vue默认不做响应式处理 直接通过修改vm._data或者vm来添加key，并不会配置getter和setter，因此不会做响应式 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,key/index,value)或vm.$set(target,key/index,value)（可以同时修改数组和对象） ​ 特别注意: Vue.set()和vm.$set()不能直接给vm或vm的根数据对象(vm._data)添加属性!!! 3.如何监测数组中的数据? 在数组中直接通过索引的方式修改数组并不会引起Vue的响应，那么要如何做呢？Vue通过包裹数组更新元素的方法(对原数组方法进行修改)实现,本质就是做了两件事: (1). 调用原生对应的方法对数组进行更新. (2). 重新解析模板,进而更新页面. 就包裹了下面的七种数组方法： push() pop() shift() unshift() splice() sort() reverse() 也就是说，通过上面七种方法修改数组，会让Vue做出响应。 例如想要修改数组中索引为0的位置的数据，可以通过 vm.data.arr.splice(0,0,val)或Vue.set(vm.data.arr,0,val)又或者vm.$set(vm.data.arr,0,val)，在具体的由Vue管理的方法中this指向的应该就是vm！！ 数据劫持 Vue通过setter,getter对数据进行动态监测，其实就是“劫持”了数据😯