本文共 5229 字，大约阅读时间需要 17 分钟。
new Array() 生成指定数组长度的假数据时，发现并没有填充数据，返回依然是空数组const data = new Array(5)console.log(data); // [empty x 5]
数组参数 elementN 根据给定的元素创建一个 JavaScript 数组，但是当仅有一个参数且为数字时除外arrayLength 一个范围在 0 到 232-1 之间的整数，此时将返回一个 length 的值等于 arrayLength 的数组对象并没有包含任何实际的元素，不能理所当然地认为它包含 arrayLength 个值为 undefined 的元素传入的参数不是有效值，则会抛出 RangeError 异常fill()函数方法，使用给定的元素填充数组，默认为undefined，让数组有值const data1 = new Array(5).fill()console.log(data1); // [undefined, undefined, undefined, undefined, undefined]const data2 = new Array(5).fill(false)console.log(data2); // [false, false, false, false, false]
value：填充值start：填充起始位置，可以省略end：填充结束位置，可以省略，实际结束位置是end-1arr.fill(value, start, end)// 采用一默认值填初始化数组const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]arr1.fill(7) // 7,7,7,7,7,7,7,7,7,7,7// 制定开始和结束位置填充，实际填充结束位置是前一位const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]arr3.fill(7, 2, 5) // 1,2,7,7,7,6,7,8,9,10,11// 结束位置省略，从起始位置到最后const arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]arr3.fill(7, 2) // 1,2,7,7,7,7,7,7,7,7,7
为 data 中的某一个对象添加一个属性，发现对象已经添加该属性，但是视图层并没有更新该数据{ { student.name }}
data() { return { student: { name: "张三", }, };},created() { },methods: { setMessage() { this.student.age = 15; console.log(this.student); },} 受 JavaScript 的限制，vue 不能监听对象属性的添加和删除，因为在 vue 组件初始化的过程中，会调用 getter 和 setter 方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化setMessage() { this.$set(this.student, "age", 15); console.log(this.student);}, import Vue from 'vue'...setMessage() { Vue.set(this.student, "age", 15); console.log(this.student);}, setMessage() { this.student.age = 15 this.student = Object.assign({ }, this.student) console.log(this.student)} 组件之间可能存在很多相似的功能，如果每个组件中去重复定义属性和方法会使得项目出现代码冗余并提高了维护难度，针对这种情况官方提供了 Mixins 特性什么是 Mixins 一种分发 Vue 组件中可复用功能的非常灵活的方式Mixins 是一个 js 对象 任意功能选项，如data、components、methods 、created、computed等等将共用的功能以对象的方式传入 Mixins 选项 当组件使用 Mixins 对象时所有 Mixins 对象的选项都将被混入该组件本身的选项中来提高代码的复用性，保持代码干净和易于维护什么时候用 Mixins 存在多个组件中的数据或者功能很相近时，可以利用 Mixins 将公共部分提取出来组件调用是不会改变函数作用域外部的如何使用 Mixins 需要调用的组件中引入 Mixins 文件，然后在 export default 中引入需要的组件即可import { myMixins } from "@/components/myMixins"export default { mixins: [myMixins]} 方法和参数在各组件中不共享 Mixins 并将其属性合并到自身组件中来其属性只会被当前组件所识别并不会被共享其他组件无法从当前组件中获取到 Mixins 中的数据和方法问题描述 Mixins 后组件会对其进行合并Mixins 中的数据和方法拓展到当前组件中来合并的过程中会出现冲突冲突点 值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的值为函数(created、mounted)的选项，混入组件时选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用vuex 状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改Mixins 定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响组件 在父组件中给出一片独立的空间供子组件使用，然后根据 props 来传值，但本质上两者是相对独立的Mixins 引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册缺点 事先定义好的，如果要从接口动态渲染组件怎么办？所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？Vue.extend + vm.$mount 组合就可以解决参数 {Object} options用法 基础 Vue 构造器，创建一个子类包含组件选项的对象data 选项是特例，在 Vue.extend() 中它必须是函数// 创建构造器var Profile = Vue.extend({ template: '{
{firstName}} { {lastName}} aka { {alias}}', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } }})// 创建 Profile 实例，并挂载到一个元素上。new Profile().$mount('#mount-point') Walter White aka Heisenberg
参考 extend 创建的是 Vue 构造器，而不是平时常写的组件实例不可以通过 new Vue({ components: testExtend }) 来直接使用通过 new Profile().$mount('#mount-point') 来挂载到指定的元素上使用 vue.component 进行实例化来模拟组件在实例化 extends 组件构造器时，传入属性必须是 propsData、而不是propsiOS 端是以 / 做分割的，而常用的都是以 - 分割，所以导致 iOS 下时间解析不了就变成NAN了将时间格式中 - 换成 /new Date("2019/01/01 00:00:00").getTime()"2019-01-01 00:00:00".replace(/\-/g, '/') // 正则 在 Vue 的 for 循环遍历对象时，无法保证指定顺序先判断是否有 iterator 接口，如果有，循环执行 next() 方法没有 iterator 的情况下，会调用 Object.keys() 方法，在不同的浏览器中，JS 引擎不能保证输出顺序一致把对象放到数组中，作为数组的元素// 将对象转成数组并依据id排序data() { return { navListArr: [] };},created() { // 方案一 let arr = [] Object.keys(this.navList).forEach((key, index) => { arr.push(this.navList[key]) }) arr.sort(this.compare("id")) this.navListArr = arr // 方案二 let array = []; for (var i in this.navList) { if (Object.hasOwnProperty.call(this.navList, i)) { const element = this.navList[i] array.push(element) } } array.sort(this.compare("id")) this.navListArr = array},methods: { // 对象排序 compare(property) { return function(a, b) { var value1 = a[property] var value2 = b[property] return value1 - value2 } }} 转载地址：http://cjqwi.baihongyu.com/