笔记 ---- 记于 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
  }
}

上一篇:浅析ref和reactive/toRefs响应式原理及reactive创建的响应式对象解构后为什么会失去响应式的原因分析


下一篇:VUE3(九)reactive与toRefs函数