VUE3.X学习

reactive

// 创建响应式对象
const userInfo = reactive({
    name： '张三',
    age: 18
}) 

ref

// 创建响应式基础数据类型String/Number
const school = ref('学校')

toRef

// 将对象属性抽出并且保持响应式关系
const name = userInfo.name // 这么写断开了与userInfo的联系，产生独立的变量
const name = toRef(userInfo, 'name')

toRefs

// 【参数必须为reactive创建出来的响应式对象】
// 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref`
const obj = reactive({name: 'james', age: '21'}) 
let { name, age } = obj 
//但是这样的结构是，name 和 age 都变成了普通的对象， 就不在是响应式的了
const { name, age } = toRefs(obj)
// name.value 和 obj.name 联系在一起
// age.value 和 obj.age 联系在一起

那么如何使用以上新特性呢？

// school.js 
// 传入的 params 是响应式的（给钩子用的watch,函数不需要,函数直接当参数传入就可以了）
import { reactive, ref, toRefs, watch } from 'vue'

export default function (params = {}) {
  const userInfo = reactive({
    name: '张三'
  })
  const title = ref('标题')

  // watch 不需要调用或者 return 出去
  watch(params.props, () => {
    console.log('外部props发生了变化')
  })

  // 供外部调用的方法 可以读取自身变量userInfo、title和外部传入的变量obj
  const fn = (obj) => {
    console.log(params, obj, '函数输出')
  }

  // 供外部赋值解构用
  // 这里这么写，统统放在一个对象里面，外部使用的时候一眼就知道是哪个文件的内容
  return toRefs(reactive({
    userInfo,
    title,
    fn
  }))
}

<template>
  {{ school.userInfo.name }}
  {{ school.title }}
</template>
<script setup>
import School from './methods'
const school = School()
const { userInfo, title, fn } = school
fn.value()
</script>

按以上写法，就可以吧tempalte和js逻辑完全隔离，js获得可复用能力,并且js可以拆分为多个，容易阅读

BUG记录：基于elementUi框架从零写管理后台模板

1、 el-form表单的input框无法输入：el-form的ref名字冲突了，改为ref=forms试试