vue3.0快速入门

vue3.0学习相关网站

1. 官网：https://vuejs.org/
2. 中文官网：https://cn.vuejs.org/
3. 中文官网vue3：https://v3.cn.vuejs.org/

vue3.0介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One Piece
Vue3.0使用了 Typescript 进行了大规模的重构，带来了 Composition API RFC 版本，类似 React Hook 一样的写 Vue，可以自定义自己的 hooks

vue3.x相对于vue2.x的最新特性：

• 新增 组合式 API
• 更加接近原生js
• 按需加载
• 体积更小，速度更快；
• 解决遗留问题，更加强壮

接下里我们安装vue3 一起来看他的精彩之处吧

安装vue3

1 全局安装vue脚手架

npm i @vue/cli -g

2 创建一个项目

vue create 项目名称

3 在管理员中进行以下选择

建议使用vue3版本时VS code安装的插件

vue2与vue3的不同之处

1. 启动方式不同（全局main.js中启动时）

vue2启动方式

import Vue from 'vue'
new Vue({
   store,
   router,
  render:h=>h(App)
}).$mount("#app")

vue3启动

import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

2. 挂载不同（全局挂载举例）

vue2 挂载

Vue.prototype.$say=function(msg){alert{msg}}

vue3挂载

const app = createApp(App);
//定义vue3 的全局方法，config 配置，global 全局 Properties属性
app.config.globalProperties.$say = function (msg) {
alert(msg);
};

3. 根节点不同

vue3可以有多个根节点
vue2有且只能一个根节点

5. 生命周期的不同

v2生命周期

<script>
beforeDestroy(){}
destroyed(){}
</script>

v3生命周期

<script>
		beforeUnmount() {
			console.log("组件将要卸载")
		},
		unmounted() {
			console.log("组件已经卸载")
		}
	}
</script>

新增 Composition API（组合式API）（较常用）

1. setup函数

• setup是Vue3.0中一个新的额配置项，值为一个函数
• setup是所有Composition API(组合api)
• 组件中所用到的：数据、方法等等，均要配置在setup中
• setup函数的两种返回值:
  若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。
  若返回一个渲染函数：则可以自定义渲染内容。

<template>
  <div>
    <h1>setup</h1>
    <button @click="num++">{{num}}</button> <br>
    <stepper-com :value="num" @input="num=$event" ref="stepper"></stepper-com>
    <p>{{size}}</p>
  </div>
</template>
<script setup>
// 使用setup 可以简写（不用导出，组件不用注册了）
  import StepperCom from '@/components/StepperCom.vue'
  // 导入useWinSize方法
  import {useWinSize} from '@/utils/utils.js'
  import {ref,onMounted} from 'vue';
  const num = ref(5);
  
  const stepper = ref();
  onMounted(() => {
    console.log("组件已经挂载完毕")
    // 组件挂载完毕引用steper组件
    // stepper.value就是对stepper-com 组件的引用
    console.log(stepper.value.count)
  })
  // 返回执行返回一个对象size
 const size = useWinSize();
</script>

2. <script setup> 单文件组件

3. ref响应式
   创建值类型响应式数据方法
   在seup内部需要 .value 来访问设置值

4. reactive创建引用类型响应式数据方法

5. defineProps定义 组传的传参props

6. defineEmits定义组件发送的事件

7. watch监听一个数据的变化

8. watchEffect 监听多个数据

9. 生命周期
   setup中的生命周期，没有beforeCreate与created
   setup的生命周期需要加on前缀

setup案例 代码

<template>
    <span>
        <button @click="count--">-</button>
        <input type="text" style="width:90px" v-model="count">
        <button @click="count++">+</button>
    </span>
</template>
<script setup>
// dfineProps 定义props
import {defineProps,ref,watch,defineEmits,watchEffect,defineExpose} from 'vue'
// 定义props传入参数
const props= defineProps({
    // 类型为数字或者字符串，默认值为1
    value:{type:[Number,String],default:1}
})
// 定义一个响应式对象初始值为 props.value
const count = ref(props.value)
// 定义事件发送器
var emits  = defineEmits(["input"])
// 监听count的变化
watch(count,()=>{
    // 发送一个input事件 事件的值为count的value
    emits("input",count.value)
})
// 在watchEffect都会被自动监听，执行局回调函数
// 只要watchEffect中出现了数据，数据发生变化时候，
// 都会执行watchEffect
watchEffect(()=>{
    count.value = props.value;
})
// defineExpose 规定了组件那些值可以被引用获取
defineExpose({count})


</script>

生命周期 案例代码

<template>
	<div>
		<h1>生命周期</h1>
		<button @click="num++">{{num}}</button>
		<button @click="setNum(num+5)">加5</button>
		<p v-for="item in list" :key="item">{{item}}</p>
		<input type="text" v-model="temp" @keyup.enter="addList()">
	</div>
</template>
<script>
	// ref 导入一个创建响应式 值类型数据的方法
	// reactive 响应式 引用类型方法
	import {
		ref,
		reactive
	} from 'vue'
	export default {
		setup() {
			// 创造一个响应式对象 num 默认值是5
			const num = ref(5);

			// 定义更新num的方法
			function setNum(n) {
				// 在setup 中num的值访问与赋值要加value 在template不需要
				num.value = n;
			}
			// 返回num
			// 定义一个响应式列表数据
			var list = reactive(["Vue", "react", "Angular", "小程序"])
			// 定义temp 临时数据
			var temp = ref("");
			// 定义添加list 的方法
			function addList() {
				// 注意值类型访问要加value
				list.push(temp.value);
				temp.value = "";
			}
			// 返回 定义的方法与数据
			return {
				num,
				setNum,
				list,
				temp,
				addList
			};
		},
		beforeUnmount() {
			console.log("组件将要卸载")
		},
		unmounted() {
			console.log("组件已经卸载")
		}
	}
</script>

未完待续…