潇洒秘籍：这次助你无缝切换vue3

一 安装插件

使用 VS Code 的官方扩展插件 Volar，这个插件给 Vue 3 提供了全面的开发支持。

二 初始化项目

在命令行窗口里，我们对 vuejs 目录执行下面的命令，这样就可以创建一个 Vite 的初始化项目。

npm init @vitejs/app

在 Project name 这一行，我们输入项目的名字，例如 geek-admin；接着，在 Select a framework 这一行输入框架的名字，这里我们选择 vue；再之后，在 select a variant 这一行，因为在项目里，我们没有选择 TS，所以这里我们依然选择 vue 即可。

三 安装 Vuex 和 vue-router

npm install vue-router@next vuex@next

四 src组织结构

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

五 vue-router

5.1 router部署

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../pages/home.vue' 
import About from '../pages/about.vue'

const routes = [ 
    { path: '/', name: 'Home', component: Home }, 
    { path: '/about', name: 'About', component: About } 
] 

const router = createRouter({ history: createWebHashHistory(), routes }) 

export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

<template>
  <div>
  <router-link to="/">首页</router-link>
  <router-link to="/about">关于</router-link>
  </div>
  <router-view />
</template>

5.2 router的使用

5.2.1 跳转页面

<div v-if="exebtn.id !== -1" class="exebtn" @click="goexe($router)">
  {{ exebtn.name }}
</div>

function goexe($router: Router) {
  // console.log('list',props.list)
  let type = props.list.train_stage === 2? 'train': 'check'
  $router.push('...')
}

import { useRouter, useRoute } from "vue-router"
const { push } = useRouter()

push('...')

5.2.2 读取参数

import { useRoute } from "vue-router"
const route = useRoute()
function getInfo() {
  getDeliveryCheckInfo({
    delivery_check_id: route.query.delivery_check_id
  }).then((res: getDeliveryCheckInfoType) => {
    console.log(res)
    delivery_check.value = res.delivery_check
  })
}

六 新的代码组织方式

6.1 组件注册

<script setup>包裹的内容，import引入的组件可以自动注册，直接在模版中使用。

<template>
    <h1>这是首页</h1>
    <TodoList />    
</template>

<script setup>
import TodoList from '../components/TodoList.vue'
</script>

6.2 data和方法

<script setup>包裹的内容，定义的变量和方法可以直接在模版中使用(响应式变量需要做ref处理)

<template>
  <div>
    <input type="text" v-model="title" @keydown.enter="addTodo" />
    <ul v-if="todos.length">
      <li v-for="todo in todos">
        <input type="checkbox" v-model="todo.done" />
        <span :class="{ done: todo.done }"> {{ todo.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
let title = ref("");
let todos = ref([{title:'学习Vue',done:false}])
let { value: arrive_store_time } = ref("")

function addTodo() {
  todos.value.push({
    title: title.value,
    done: false,
  });
  title.value = "";
}
</script>

6.3 计算属性

计算属性生成的变量与data变量相同，在js中以active.value的方式调用，再html中可以直接调用。

<script setup>
import { ref, computed } from "vue";
let active = computed(() => {  
  return todos.value.filter((v) => !v.done).length;
});
</script>

七 动态style

使用 v-bind 函数绑定 color 的值，就可以动态地通过 JavaScript 的变量实现 CSS 的样式修改。

<template>
  <div>
    <h1 @click="add">{{ count }}</h1>
  </div>
</template>

<script setup>
import { ref } from "vue";
let count = ref(1)
let color = ref('red')
function add() {
  count.value++
  color.value = Math.random()>0.5? "blue":"red"
}
</script>

<style scoped>
h1 {
  color:v-bind(color);
}
</style>

八 自定义组件

8.1 props

<template>
    <div>
        {{rate}}
    </div>
</template>

<script setup>
import { defineProps,computed } from 'vue';
let props = defineProps({
    value: Number
})
let rate = computed(()=>"★★★★★☆☆☆☆☆".slice(5 - props.value, 10 - props.value))
</script>

8.2 事件

<template>
   <span @click="onRate(num)" @mouseover="mouseOver(num)" v-for='num in 5' :key="num">★</span>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref} from 'vue';

let emits = defineEmits('[update-rate]') // 定义emits
function onRate(num){
    emits('update-rate',num)
}
</script>

<Rate :value="score" @update-rate="update"></Rate>

8.3 v-model

<rateVue theme="red" v-model="score"/>

import { defineProps,computed,ref,defineEmits } from 'vue';
let props = defineProps({
    modelValue: {
        type: Number,
        default: 0
    }
})
let emits = defineEmits(['update:modelValue'])
function onRate(num: number){
    emits('update:modelValue',num)
}

九 api一览

9.1 toRef与roRefs

toRef:

const myTitle = toRef(props, 'title')
console.log(myTitle.value)

toRefs:

const { myTitle } = toRefs(props)
console.log(myTitle.value)

9.2 watchEffect && watch

watchEffect 不需要指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行，而 watch 只能监听指定的属性而做出变更(v3开始可以同时指定多个)。

是 watch 可以获取到新值与旧值（更新前的值），而 watchEffect 是拿不到的。

watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖（与computed同理），而后收集到的依赖发生变化，这个回调才会再次执行，而 watch 不需要，因为他一开始就指定了依赖。

const stop = watchEffect(() => console.log(userID))
// ---
stop()

watchEffect 会返回一个用于停止这个监听的函数。

如果 watchEffect 是在 setup 或者 生命周期里面注册的话，在组件取消挂载的时候会自动的停止掉。

十 响应封装

定义一个函数。

入参为普通变量，转化为ref值，为该值添加一个监控，返回该值。

function useStorage(name, value=[]){ 
  let data = ref(JSON.parse(localStorage.getItem(name)|| value)) 
  watchEffect(()=>{ localStorage.setItem(name,JSON.stringify(data.value)) }) 
  return data
}

function test(str: String){
    let a: Ref = ref(str)
    watchEffect(() => {
        console.log(a.value)
    })
    return a.value
}
let str = test('可可')
str = '小可'