vite2.0+vue3.0+ts

vite2.0+vue3.0+ts
1、template中可以有多个根元素，以前只能包在一个父容器中

<template>
<p>{{count}}</p>
<el-button type="primary" @click="clickTo">子组件</el-button>
<el-button type="primary" @click="go">跳转</el-button>
{{state.sum}}
<van-button @click="add"> add</van-button>
<div v-for="(item,key) in state.list" :key="key">
  <p>{{item}}</p>
</div>
</template>

2、script setup模式和script var模式，书写代码更加简便
直接定义不用在return出去，组件引入可以直接使用不用在components中定义
可以直接在script 中定义变量来存放css一些属性，在css中通过v-bind()来应用

<script lang="ts" setup>
//不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup 。

import { ref ,defineEmits,defineProps,reactive,computed,watch,getCurrentInstance,defineExpose,withDefaults  } from 'vue'

const count = ref(15265)

const state=reactive({
  list:{},
  num1:5,
  num2:10,
  sum:computed(()=>{
    return state.num1+state.num2
  })
})
const stateCss = reactive({
  color: "red",
});
</script>

<style scoped>
.text {
  color: v-bind("stateCss.color");
}
</style>

3、属性需要从vue中结构出defineProps或者withDefaults，这个新的 withDefaults API 可以让你在使用 TS 类型系统时，也可以指定 props 的默认值。

//定义属性
defineProps({
  mas:String,
  name: {
    type: String,
    required: false,
    default: 'Petter',
  },
})
//这个新的 withDefaults API 可以让你在使用 TS 类型系统时，也可以指定 props 的默认值。
withDefaults(defineProps<{
  size?: number
  labels?: string[]
}>(), {//默认值
  size: 3,
  labels: () => ['default label']
})

通过ref来调用子组件暴露出来的方法

<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" @hellFun="getvalue" ref='hw'/>
const hw=ref(null)

const getvalue=(val:any)=>{
  hw.value.someMethods()
}
//子组件
defineExpose ({
  someMethods(){
    console.log('暴露的方法');
  }
})

4、数据监听

//监听基本数据类型
watch(count,(next,old)=>{
  console.log(next,old);
})

//监听对象 数组
watch(()=>state.sum,(next,old)=>{
  console.log(next,old);
})

 /**上面我们分别使用了两个 watch, 当我们需要侦听多个数据源时， 可以进行合并，同时侦听多个数据：**/
watch([()=>state.sum,count],([cur,pre],[newValue,oldValue])=>{
  console.log(cur,'新值',pre,'旧值');
  console.log(newValue,'新值',oldValue,'旧值')
})

5、获取上下文useContext（）官方已经启用
新增 useSlots API 和 useAttrs API 在 useContext API 被删除后，原先的上下文数据，将由这两个新 API 获取到。暴露一些方法新增defineExpose

//获取上下文
//新增 useSlots API 和 useAttrs API 在 useContext API 被删除后，原先的上下文数据，将由这两个新 API 获取到。
// const ctx=useContext()//弃用

const {proxy}=getCurrentInstance()

//暴露一些方法给父组件  让ref可以调用这些方法
defineExpose ({
  someMethods(){
    console.log('暴露的方法');
  }
})

6、子组件向父组件传参的emit事件，需要从vue引入defineEmits方法，也可以通过getCurrentInstance方法获取vue实例来.emite（）

const emit= defineEmits(['myclick','hellFun'])

const clickTo=()=>{
  getUser().then(res=>{
    console.log(res);
    state.list=res.data
    ctx.emit('hellFun',count.value)
  })
 emit('hellFun',count)
}

完整代码如下

<template>
<p>{{count}}</p>
<el-button type="primary" @click="clickTo">子组件</el-button>
<el-button type="primary" @click="go">跳转</el-button>
{{state.sum}}
<van-button @click="add"> add</van-button>
<div v-for="(item,key) in state.list" :key="key">
  <p>{{item}}</p>
</div>
</template>

<script lang="ts" setup>
//不必再配合 async 就可以直接使用 await 了，这种情况下，组件的 setup 会自动变成 async setup 。

import { ref ,defineEmits,defineProps,reactive,computed,watch,getCurrentInstance,defineExpose,withDefaults  } from 'vue'
import {useRouter} from "vue-router"
import {useStore} from 'vuex'
import {getUser} from "../api/user"
const count = ref(15265)

const state=reactive({
  list:{},
  num1:5,
  num2:10,
  sum:computed(()=>{
    return state.num1+state.num2
  })
})
//定义属性
defineProps({
  mas:String,
  name: {
    type: String,
    required: false,
    default: 'Petter',
  },
})
//这个新的 withDefaults API 可以让你在使用 TS 类型系统时，也可以指定 props 的默认值。
withDefaults(defineProps<{
  size?: number
  labels?: string[]
}>(), {//默认值
  size: 3,
  labels: () => ['default label']
})
//监听基本数据类型
watch(count,(next,old)=>{
  console.log(next,old);
})

//监听对象 数组
watch(()=>state.sum,(next,old)=>{
  console.log(next,old);
})

 /**上面我们分别使用了两个 watch, 当我们需要侦听多个数据源时， 可以进行合并，同时侦听多个数据：**/
watch([()=>state.sum,count],([cur,pre],[newValue,oldValue])=>{
  console.log(cur,'新值',pre,'旧值');
  console.log(newValue,'新值',oldValue,'旧值')
})

//获取上下文
//新增 useSlots API 和 useAttrs API 在 useContext API 被删除后，原先的上下文数据，将由这两个新 API 获取到。
// const ctx=useContext()//弃用

const {proxy}=getCurrentInstance()
//获取路由实例
const router=useRouter()
//vuex
const store=useStore()

const go=()=>{
  console.log(import.meta.env.VITE_APP_WEB_URL)
  console.log(store.state.app.tagNavList);
  router.push({
    path:'list',
    query:{
      name:'参数'
    }
  })
}
const add=()=>{
  count.value++
  state.num1++
}
//暴露一些方法给父组件  让ref可以调用这些方法
defineExpose ({
  someMethods(){
    console.log('暴露的方法');
  }
})
const emit= defineEmits(['myclick','hellFun'])

const clickTo=()=>{
  getUser().then(res=>{
    console.log(res);
    state.list=res.data
    ctx.emit('hellFun',count.value)
  })
  // emit('hellFun',count)
}

</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>