vue3笔记（一）持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情 1.

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

1. Vite

vue3可以通过vuecli创建项目，创建过程和vue2一样。在下面的教程我们使用vite作为开发工具

vite好处就在于快 vite文档

1.1. 通过vite安装

yarn create vite 项目名 --template vue

vite预设的模板有

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts

1.2. 运行项目

创建项目后，需要安装模块

yarn

模块安装完成，可以运行项目

yarn run dev

访问localhost:3000访问项目

因为我们的接口端口也是3000，所以需要我们配置对应的vite中的服务器端口

在vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  server: {
    port: 8080
  }
})

这样就可以通过http://localhost:8080访问

2. Vue3

vue3兼容大部分的vue2的语法，如果从vue2过渡到vue3，哪怕不学习语法也能直接搞定对应的开发，但是不推荐。

本质上，vue3中最大的更新就是开发方式的更新，从原本的option api转到到composition api

vue3文档

2.1 setup

在vue3中想要使用组合式api就需要使用setup

// Vue3刚开始
<script>
export default {
    setup (props) {
        
    }
}
</script>

// 随着版本的更新退出setup语法糖
<script setup>

</script>

2.2 响应式api

在setup里，所有基于响应式api定义的变量都会暴露给模板

2.2.1. ref

如果未来要把整个数据进行修改用ref

ref是从vue里导入的

import { ref } from 'vue'

如何使用

<script setup>
const 变量 = ref("值")

// 想要改变对应变量的值
变量.value = "新的值"
</script>

当我们在内部需要修改ref的值时，需要使用.value

在模板中可以直接的去使用

<template>
    <div>
        {{变量}}
    </div>
</template>

2.2.2. reactive

如果只是修改对象中的属性，用这个

import { reactive } from 'vue'
const 对象 = reactive({})
const 数组 = reactive([])

这个值想要修改时直接修改即可

2.2.3. 计算属性

在组合式api中，我们的computed是分离的

import { computed } from 'vue'

const value = computed(() => 返回值)

// 以前的版本
{
    computed: {
        value () {
            return 返回值
        }
    }
}

2.2.4. 监听

watchEffect

当我们watchEffect中使用到了某个数据，则当这个数据改变时，对应的函数就会被重新调用

const str = ref("值")

watchEffect(() => {
    // 在这个函数中，我们使用了str.value 那么当这个值改变时，就会重新触发该函数
})

watch

我们也可以使用watch去监听某个数据源的改变，然后触发对应的函数，类似vue2中watch用

// 如果监听的是ref
const str = ref("值")
watch(str, (newStr, oldStr) => {
    
})

// 如果监听reactive中的某个值
const obj = reactive({a: 1})
watch(() => obj.a, () => {
    
})

2.3 函数

我们组件中所涉及到的函数可以直接在setup中进行定义

<script setup>

const 函数 = () => {}

function 函数 () {}
</script>

绑定事件时，就可以直接选择对应的函数

<button @click="函数">
   按钮
</button>

2.4 组件

在setup可以不去注册组件，直接引入就可以使用，例如：

Child.vue

<template>
  <div>
  	child    
  </div>
  
</template>


<script setup>

</script>


<style>

</style>

App.vue

<template>
  <div id="app">
   	<Child></Child>
  </div>
  
</template>


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

</script>


<style>

</style>

2.4.1 props接收

在setup中，接收props有特殊写法。需要使用defineProps

definProps({
    prop名字: 类型
})

写好后就可以去使用对应的prop

2.4.2 emit自定义事件触发

我们需要使用defineEmits去定义好这个组件中可以触发的自定义事件，然后使用调用该方法的返回值进行触发

2.5 生命周期

大部分的生命周期还是继续存在的，但是写法不同

created beforeCreate

在vue3中是setup，在vue3中，这两个生命周期不体现了

在其他的生命周期中，我们把原有的写法，需要加上on生命周期

Vue2	Vue3 (组合式API)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted

<script setup>
onMounted(() => {
    // 在这里执行代码
})

// 语法
生命周期函数(() => {
    // 对应的代码
})
</script>

2.6 vue3 hook

vue3的hook函数需要使用use开头，例如useTodos

export default function use自定义的名字 (形参) {
	// 写功能代码
    
   	return {
   		// 用于组件上的相关的属性和方法    
   	}
    
}

如何使用，在对应的组件中引入对应的hook

import use自定义名字 from 'hook路径'

const { hook中返回的数据 } = use自定义名字(实参)