vue3.0语法糖

vue3.0语法糖

<template>
  <section>
 	 <el-table :data="table" border ref="tableRef" height="calc(100vh - 200px)" highlight-current-row @row-click="rowClick"
        :header-cell-style="{background:'#f2f4f6',color:'#171717', lineHeight:'54px'}" v-loading="loading_M"
        style="width: 100%;">
        <el-table-column type="index" label="序" width="50" align='center'></el-table-column>
        <el-table-column prop="courtOrgName" label="单位" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column><el-table-column prop="attr7" label="个人履历" width="160" align='center'>
          <template #default="scoped">
            <el-button type='primary' size='mini' plain>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
</template>
<script>

<script>
//按需引入vue
  import {
    onMounted, //生命周期
    reactive, //对象创建响应式状态,建立数据交互通信方法
    toRefs,
    getCurrentInstance,
    defineComponent
  } from 'vue';
  export default defineComponent({
    name: 'login',
    setup(props) {
      console.log(getCurrentInstance());
      //相当于 Vue2.0 的 this 对象
      // ctx 获取实例上下文
      const {
        proxy
      } = getCurrentInstance(); // proxy 与 ctx 东西一样，支持开发环境和生成环境的使用
      console.log("proxy", proxy);
      
  	//===========================生命周期 - onMounted - start========================
      onMounted(() => {
        proxy.pageInit();
      })
      //===========================生命周期 - onMounted - end========================


      //===========================data - start========================

      //vue3.0 - data ; reactive方法为对象创建响应式状态,建立数据交互通信
      const dataConfig = reactive({
        //码表
        // util文件调用方式  proxy.$Util ,在main.js中进行定义全局变量app.config.globalProperties.$Util = util;
        options: proxy.$Util.getDicts([
          "dm_persontype", //人员性质
          'up_sex'
        ]).then(res => {
          dataConfig.options = res.data
        }),

        table: [], //主表数据
        loading_M: false, //主表加载
      })  
      const data = toRefs(dataConfig);
      //===========================data - end========================

      //===========================业务功能 - start========================
      const pageInit = () => {
        proxy.loading_M = true;
        let para = {
          page: proxy.page.pageIndex,
          pageSize: proxy.page.pageSize,
        };
        $.ajax({
          type: "post",
          url: proxy.$baseUrl + "/***",
          dataType: "json",
          data: JSON.stringify(para),
          traditional: true,
          contentType: "application/json;charset=utf-8",
          success: function (res) {
            console.log('res1111', res.data);
            if (res.flag == 'success') {
              dataConfig.table = res.data.records;
              dataConfig.page.total = res.data.total;
            }else{
              proxy.$message.error('页面初始化失败！');
            }
            proxy.loading_M = false;
          }
        });
      }    
      //===========================业务功能 - end========================


      //所有data、方法等 const申明的，只有return 才生效
      return {
        ...data,
        pageInit,
      };

    }
  })
</script>

语法明细

1. vue3.0中废弃 slot-scoped 插槽,使用 # (代替 v-slot:)，使用方法

<template #default="scoped">
   <el-button type='primary' size='mini' plain>查看</el-button>
</template>

2. vue3.0中 v-model 或 table名称 与 ref 对象名称不可一致，在vue2.0中可以
3. vue3.0中 响应状态结构 reactive,toRefs

import { reactive } from 'vue'

const book = reactive({
  author: 'Vue Team',
  title: 'Vue 3 Guide',
  price: 'free'
})

let { author, title } = book

使用解构的两个 property 的响应性都会丢失,通过转换为一组 ref保留响应关联

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: 'You are reading this book right now ;)',
  price: 'free'
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'

此案例就是我们上面的项目reactive详解。
4. vue3.0中 defineComponent:对setup 进行了封装，返回options的对象
5. 在生命周期内部使用 getCurrentInstance 来获取上下文，vue3.0 废除 this
6. 生命周期

beforeCreate ->使用 setup()
created ->使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered