笔记 ---- 记于 2021.02.22

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
　　}
}

标签：2021.02,返回,ref,data,setup,----,reactive,数组,记于
来源： https://www.cnblogs.com/Amerys/p/14669626.html