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

Posted 2022-02-13 前端呆头鹅

文章目录

• • • 一 安装插件
    • 二 初始化项目
    • 三 安装 Vuex 和 vue-router
    • 四 src组织结构
    • 五 vue-router
    • • 5.1 router部署
      • 5.2 router的使用
      • • 5.2.1 跳转页面
        • 5.2.2 读取参数
    • 六 新的代码组织方式
    • • 6.1 组件注册
      • 6.2 data和方法
      • 6.3 计算属性
    • 七 动态style
    • 八 自定义组件
    • • 8.1 props
      • 8.2 事件
      • 8.3 v-model
    • 九 api一览
    • • 9.1 toRef与roRefs
      • 9.2 watchEffect && watch
    • 十 响应封装

一 安装插件

使用 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 = '小可'