vue3的基本使用

vue3的基础使用;

安装vite：npm inistall -g create-vite-app

利用vite创建vue3项目：create-vite-app projectName

安装依赖运行项目：cd projectName npm install npm run dev

文档地址：https://v3.vuejs.org/guide/introduction.html

composition API的本质其实就是把setup()中的方法和数据注册到data/methods中;

ref定义简单类型的数据， reactive定义复杂类型的数据;

vue3基本使用方式

import {ref , reactive} from 'vue' // reactive只有传入复杂类型(json/arr)才会成为响应式
export default {
  name: 'App',
  // setup函数是组合api的入口函数
  // 执行时机在beforeCreate之前，所以此时是无法使用data/methods
  // 由于不能在setup不能访问data/methods，此时的this的值为undefined
  // setup只能是同步的
  setup () {
    let {state, deleteLine} = diyFun()
    let count =  ref(0)
    return {state, deleteLine, count} // 暴露出去之后就可以使用这些变量了
  }
}
function diyFun() {
  let state = reactive({
    stus: [
      {id: 1, name: 2, age: 3},
      {id: 2, name: 3, age: 4},
      {id: 3, name: 4, age: 5},
      {id: 4, name: 5, age: 6}
    ]
  })
  function deleteLine(index) {
    console.log(index)
    state.stus.splice(index, 1)
  }
  return {state, deleteLine}
}

reactive注意点:

reactive传递的参数必须是object/arr

如果传递了其他的对象，默认情况下修改对象，界面不会自动更新，如果想要

更新，可以通过重新赋值的方式

// 重新赋值
function changeTime() {
  let stateDate = reactive({
    time: new Date()
  })
  function changeDetail() {
    let data = new Date(stateDate.time.getTime())
    data.setDate(stateDate.time.getDate() + 1)
    stateDate.time = data
  }
  return {stateDate, changeDetail}
}

ref的本质其实还是reactive，当我们给ref函数传递一个值之后，ref

函数会自动的转化成{value: xx}，只是中间自动帮我们套了一层value

const name = ref(1) => name: {value: 1}

所以当我们修改值时，name.value = ‘xxx',此时才能进行响应式更新.

同理： shallowRef本质上也是shallowReactive

递归监听（通过ref和reactive来创建得数据）

在多层嵌套得对象中，vue3会递归每一层对象，并对每一层对象创建一个proxy进行监听，所以非常消耗性能,

  let obj = reactive({
      a: {
          b: 'v',
          c: {
              d: '666',
              e: {
                  f: '7777'
              }
          }
      }
  })

非递归监听 shallowReactive shallowRef, 只会监听最外一层

修改， 单独修改obj.a.b是不会重新渲染得，因为是没有被proxy监听得，

只有同时修改了obj得第一层属性值才会重新渲染，只有obj被proxy监听了

let obj = shallowReactive({
      name: '11111',
      a: {
          b: 'v',
          c: {
              d: '666',
              e: {
                  f: '7777'
              }
          }
      }
  })
 // 修改， 单独修改obj.a.b是不会重新渲染得，因为是没有被proxy监听得，
// 只有同时修改了obj得第一层属性值才会重新渲染，只有obj被proxy监听了
obj.name = 'zhangsan'
obj.a.b = '7777777'

通过shallowRef创建得数据，监听得是obj.value得值，修改方式如下，将整个对象提出来修改

如果只想单独修改一个值， 配合triggerRef(obj)使用，此时会重新渲染界面

注意：没有triggerReactive()方法

obj.value = {
            name: 'asdasdasd',
            a: {
                b: 'asdasdasd',
                c: {
                    d: '66132126',
                    e: {
                        f: '7123123777'
                    }
                }
            }
        }

// 如果只想单独修改一个值， 配合triggerRef(obj)使用，此时会重新渲染界面
// 注意：没有triggerReactive()方法
obj.value.name = 'asdasdasd123123'
triggerRef(obj)

toRaw方法，在有些情况下，我们修改了reactive/ref中得数据得时候，并不希望他去更新UI

但是他本身是响应式得，此时可以使用toRaw来避免这种更新达到提升性能得作用

reactive创建得数据

let obj2 = toRaw(obj)
obj2.name  = '123123123123' // 此时obj中proxy代理得值也发生变化了，但是界面没有更新
//  ref创建得数据想使用toRow得话
let obj2 = toRaw(obj.value) // 因为ref本质还是reactive
obj2.name  = '123123123123'

markRow 使某个值永远不会响应式

let obj = {a: 1, b: 2}
obj = markRow(obj)
let state = reactive(obj) //此时state的值再发生修改就不会重新渲染了

toRef和ref定义数据

let obj = {a: 1, b: 2}
let state = ref(obj.a)
let state = toRef(obj, name)
/*
此时修改state.value的值。obj中对应的a的值不会更改，但是UI会自动更新
如果使用的是toRef，在修改了数据之后，obj的值会跟着变化，但是UI不会更新
*/

也可以使用toRefs

let state = toRefs(obj) // 直接遍历obj中所有的属性，作用和toRef差不多，修改原始数据

vue3中使用生命周期函数和获取dom得方式

使用生命周期->引入对应得生命周期函数，在setup中使用onMounted()

//       <div ref="box"> 123123123</div>
let box = ref(null) // 定义一个空的ref数据，将该数据暴露出去给节点绑上ref值
onMounted(() => {
  console.log(box.value) // 即可拿到节点对象
})
return {box}

readonly:创建一个只读的数据，并且是递归只读
let state = readonly({name: 1, attr: {a:1, b: 2})
shallowReadonly：用于创建一个只读的数据，但不是递归只读的，只能用于第一层
isReadonly()用于判断该值是不是只读的