1、String.fromCharCode() ==> 方法返回根据指定的UTF-16代码单元序列创建的字符串
eg: let letterArr = []
// 选出26个字母
for (let i = 65; i < 91; i++) {
letterArr.push(String.fromCharCode(i))
}
letterArr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
2、数组map: 返回新数组,不改变原数组,返回值是每调用一次函数就返回当前项的值
数组filter:返回新数组,不改变原数组,该函数若返回true则保留数组的当前遍历项(最终返回的数组含该项),若返回false则过滤(最终返回的数组不含该项)。
3、find: 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。语法:array.find(mapfuc)
eg: let array = [0,12,22,55,44]
console.log(array.find((item,index) => item >= 18)) // 22
4、findIndex:方法返回数组中满足条件的第一个元素的下标。否则返回 -1。
5、在全局样式中添加如下样式代码,修复el-table表头和表格内容对不齐问题
.el-table th.gutter {
display: table-cell !important;
text-algin: center; // 可选
}
6、vue 3
1、双向数据绑定 ==> 不存在this (undefined)
vue2 使用Object.defineProperty() 方式来截持数据的变更,响应式数据需要通过 data() 初始化预先定义好
vue3 之后,data 中的数据不再进行响应式追踪,而是将它转化为proxy 代理再进行追踪更新。
2、setup(props,context)
执行 setup 时,组件实例尚未被创建。因此,你只能访问以下 property:
props
attrs
slots
emit
换句话说,你将无法访问以下组件选项:
data
computed
methods
Tips: 由于setup是围绕beforeCreate和created生命周期挂钩运行的,因此您无需显式定义它们。换句话说,将在这些挂钩中编写的任何代码都应直接在setup函数中编写。
//--------------------eg---------------------------
//在VUE3中
<div>{{num}}</div>
import {reactive,computed} from 'vue'
//setup:因为在执行setup时还没有执行created所以不能使用data和methods,setup是处于 //beforecreated和created生命周期之间的所以不能使用。
//setup:是Composition API 的入口。
setup(){
//第一种写法 可以用ref()形式,通过定义ref变量把普通的变量变成了响应式变量
注意:
1、通过ref定义变量,在用到变量的时候必须通过num.value去取,
2、定义的变量必须return返回出去,这样才能在template中渲染出来
const num=ref(0)
//第二种写法可以用reactive的形式,
注意:通过reactive的形式必须先引入reactive,再使用。
const data=reactive({
name:'123456',
count:1,
add:()=>{data.name===''},
computed:(()=>{return data.count++})
})
return{
num,
name,
count,
add,
}
}
//在vue2中
<div>{{name}}</div>
data(){
return{
name:""
}
}
}
3、生命周期钩子
通过引入 onXXX 的形式,使setup函数中支持钩子函数的调用
setup() {
// mounted
onMounted(() => {
console.log('Component is mounted!')
})
}
4、Provide / Inject 解决连续props传值
5、响应式
import { ref } from 'vue' // 创建独立的响应式值
import { reactive } from 'vue' // 响应式状态
setup() {
// ref就可以为变量初始化,并且响应式
const readersNumber = ref(100)
// 响应式状态
const book = reactive({ title: 'Vue 3 Guide' })
// 与vue2的data(){return {}}一样
return {
readersNumber,
book,
}
},
// 时间改变
methods: {
updateBook() {
this.book.title = 'webpack'
},
updateNumber() {
this.readersNumber = 200
}
}