vue3.x配合Typescript配合element-ui-Plus 基础安装配置使用教程(vue3.x ref 响应式，钩子)

vue3.x（[email protected]） Typescript   element-ui-Plus 

vue3不适用2版本的element-ui，要使用https://element-plus.gitee.io/#/zh-CN/component/installation（element-ui-plus）

安装步骤：vue add element-plus

安装完： main.ts内会新增

import installElementPlus from './plugins/element'

const app = createApp(App)
installElementPlus(app)

把./plugins/element的element文件后缀改为ts

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'

export default (app: any) => { // 加入any类型判断
  app.use(ElementPlus, { locale })
}

成功引入element-ui-plus

vue3写法，新特性

1、setup 函数 setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口

1.1 执行时机 setup 函数会在 beforeCreate 之后、created 之前执行

ref

示例

在 reactive 对象中访问 ref 创建的响应式数据

// template 渲染
{
    {state.selectGirl}}


setup () {
  const state = reactive({selectGirl})
  console.log(state.selectGirl) // 1
  return { state }
}

reactive toRefs

reactive可以声明变量，直接赋值，不要.value，但是它不是响应式的数据，需要使用toRefs，toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据

{
    { count }}
+1

import { toRefs, reactive } from 'vue'

setup() {
  const state = reactive({
    count: 0,
    naem: 'zs'
  })

  const increment = () => {
    state.count++
  }

  return {
    // 将 state 上的每个属性，都转化为 ref 形式的响应式数据
    ...toRefs(state),
    increment 
  }
}

生命周期，钩子函数

这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。

写法

setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  },

与2对应

Vue2.x 的生命周期  ｜	Vue3.x 的生命周期
beforeCreate     ｜	使用 setup()
created     	 ｜  使用 setup()
beforeMount      |	onBeforeMount //组件挂载到节点上之前
mounted          |	onMounted //组件挂载完成后
beforeUpdate     |	onBeforeUpdate //组件更新之前
updated	         |  onUpdated // 组件更新完成后
beforeDestroy    |	onBeforeUnmount //组件卸载之前
destroyed        |	onUnmounted //组件卸载完成后
errorCaptured    |	onErrorCaptured //捕获一个来自子孙组件异常
                 ｜ onActivated //被包含在中的组件会多出两个生命周期钩子函数，被激活时执行
                 ｜ onDeactivated // 比如a组件切换到b组件，a组件消失时执行
                

新增的钩子函数

除了与 Vue2.x 等效的生命周期之外，composition-api 还新增了以下生命周期钩子用作调试：

onRenderTracked onRenderTriggered 两个钩子函数都接收一个 DebuggerEvent :

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
  },
}

原2.x钩子函数也能写，写在setup下面，setup（）在beforeCreate之前执行。 只要用一种就行，如果混用，同类型的钩子setup里的比2.x的先执行

props（组件传值）,context（上下文对象）,

&&

Suspense（异步组件）,teleport（自由组件）

teleport 自由组件，可自由展示在想要地方

如index.html，或者其他任意地方

watch， computed

setup () {
    const confirmVal = ref('粉红浪漫')
    const data = reactive({
     name: '秋梨膏',
     userList: [{name: '老司机', age: 99}]
    })
    
    const userInfo = computed(() => {
      return data.userList.find(item => item.name === '老司机')
    })
    
    
    //1.watch单个值
    watch(confirmVal, (newVal, oldVal) => {
        console.log(newVal, oldVal)
    })
    
    //2.watch多个值，对象某个属性，取值方法1
    watch([confirmVal, () => data.name], (newVal, oldVal) => {
        console.log(newVal[0], oldVal[0])
        console.log(newVal[1], oldVal[1])
    })
    
    //3.watch多个值，对象某个属性，取值方法2
    watch([confirmVal, () => data.name], [(newConVal, oldConVal), (newName, oldName)] => {
        console.log(newConVal, oldConVal)
        console.log(newName, oldName)
    })
    
    return {
        confirmVal,
        ...toRefs(data),
    }
}

Suspense异步组件

AsyncShow组件，里是一个promise，如果我们要在等待组件获取数据并解析时显示“正在拼了命的加载…”之类的内容，则只需三个步骤即可实现Suspense。

将异步组件包装在