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