Loading... # Vue3 vue3.0.0-alpha.0至今天已经发布近两年了,从当时各大开发人员请求支持TypeScript,到现在script已经全面支持Ts语法。再从去年的setup语法糖试用到现在setup语法已经提正式版本,vue越来越深得开发人员的亲赖 这边文章将讲述vue3的基本使用以及ts语法 ```js // 版本 "vue": "^3.0.5", "vue-router": "^4.0.10", "vite": "^2.4.3", "vuex": "^4.0.2" ``` ## 基本语法 ### 1.响应式变量ref ```html <!-- template --> <div :class="active === 1 ? 'active-color' : ''"></div> ``` ```js // script setup() { import { ref } from 'vue' // js语法 const active = ref(0) // ts语法 const active = ref<number>(0) // 修改active的值 active.value = 1 // 暴露active在tamplate才能使用 return { active } } ``` ## 2.响应式变量reactive ```html <!-- template --> <div>{{ user.name }}</div> <div>{{ user.age }}</div> ``` ```js // script import { reactive } from 'vue' // reactive和ref一样,作用为定义变量,不过区别为reactive是一个对象且这个对象的属性并不是响应式的 // 当变量多的时候,我们定义ref就相当麻烦,这时我们需要使用reactive // 注意:reactive的属性并不是响应式的,即name和age并不是响应式的 // js用法 setup() { const user = reactive({ name: 'Alice', age: 12, }) // ts用法 interface User{ name:string; age:number; } const user = reactive<User>({ name: 'Alice', age: 12, }) // 修改值 user.name = 'Marry' user.age = 16 return { user } } ``` 由于上面`name`和`age`并不是响应式的,我们要把它改为`ref对象`,才是响应式,官方提供了方法`toRefs()` ```js // script setup() { import { toRefs } from 'vue' const userRefs = toRefs(user) // 这时user.name和user.age才是响应式 // 修改值时应写为 userRefs.name.value = 'Marry' userRefs.age.value = 16 return { userRefs } } ``` #### 优化reactive 但是我们一般在代码都不会这样写。简略写法如下 ```js // script setup() { import { toRefs } from 'vue' // 提示...为ES6解构语法 return { ...toRefs(user) } } ``` 这时`template`中可直接使用,也不用加前缀user ```html <!-- template --> <div>{{ name }}</div> <div>{{ age }}</div> ``` ## 3.获取dom元素 ```html <!-- template --> <div class="chart" ref="myChartEle"></div> ``` ```js // script setup() { // js语法 const myChartEle = ref(null) // ts语法 const myChartEle = ref<HTMLElement | null>(null) onMounted(() => { console.log(myChartEle.value) // 输出为<div class="chart"></div> }) return { myChartEle } } ``` ### 4.事件 ```html <!-- template --> <div @click="handleCountClick">{{ count }}</div> ``` ```js // script setup() { // js语法 const conut = ref(0) // ts语法 const count = ref<number>(0) const handleCountClick =() => { count++ } return { count, handleCountClick } } ``` ## vue-router ### 基础配置 ```js // src/router/index // createRouter创建一个路由,传入一个对象,对象里面两个属性({history: 路由模式<hash|history>, routes[路由配置项]}) // createWebHashHistory 这里选择hash路由 // RouteRecordRaw ts语法支持 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' // js语法 const constantRoutes = [ { path: '/', component: () => import('../layout/index.vue'), children: [ { path: '/', component: () => import('../views/home/home.vue') }, { path: '/login', component: () => import('../views/login/login.vue') } ] } ] // ts语法 const constantRoutes: Array<RouteRecordRaw> = [ // ... ] const router = createRouter({ history: createWebHashHistory(), routes: constantRoutes }) export default router ``` ```js // src/main.ts import router from './router/index' const app = createApp(App) app.use(router).mount('#app') ``` ### 基本使用 这里我们简单实现一个获取当前路径在路由中属于第几个(导航栏active中经常用到) ```js import { useRouter } from 'vue-router' setup: () => { const router = useRouter() const active = router.getRoutes().map((item, index) => { if(item.path === router.currentRoute.value.path){ return index } }) } ``` ## vuex ### 基础配置 ```js // src/store/index import { createStore } from 'vuex' // js写法 const store = createStore({ state(){ return { userIsLogin: flase } }, mutations: { CHANGE_USER_LIGIN(state, payload){ state.userIsLogin = payload } }, actions: { sendChangeUserLogin({ commit }, payload){ commit('CHANGE_USER_LIGIN', payload) } } }) // ts写法 interface State { userIsLogin: boolean } const store = createStore<State>({ state(){ return { userIsLogin: flase } } // ...写法同上 }) export default store ``` ```js // src/main.ts import store from './store/index' const app = createApp(App) app.use(store).mount('#app') ``` ### 基本使用 ```js import { useStore } from 'vuex' setup(){ const store = useStore() store.dispatch('sendChangeUserLogin', true) console.log(store.state.userIsLogin) } ``` ## setup语法糖 正常我们写一个script是这样的 ```html <template> <div @click="handleCountClick">{{ count }}</div> </template> <script lang="ts"> // defineComponent为语法提示 import { defineComponent, ref } from 'vue' setup() { const count = ref<number>(0) const handleCountClick = () => { count++ } return { count, handleCountClick } } </script> ``` 如果我们使用setup是这样的 ```html <template> <div @click="handleCountClick">{{ count }}</div> </template> <script lang="ts" setup> import { ref } from 'vue' const count = ref<number>(0) const handleCountClick = () => { count++ } </script> ``` 当我们就使用了一个函数,我们代码量减少了5行,当代码多起来了,优化可想而知 最后修改:2022 年 09 月 15 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用,请随意赞赏