vue3 基础用法

vue3 的基础用法

对于MVVM的理解 <=> 双向绑定

a. 语义化模版提升开发效率

b. MVC：把系统应用分为：model（操作的dom，数据结构）| view（渲染出来的视图dom）| controller（更新的调度）

c.MVVM：model （操作的dom，数据结构） | view （渲染出来的视图dom） | viewModel

viewModel
i. 数据本身会绑定在viewModel层，视图层和view层相关联
ii.i. 数据发生变化 => viewModel => 更改数字
ii.ii. 数据发生变化 => viewModel => 更新视图

写法

compiler | defineReactive | tick

vue是如何利用mvvm进行写法统一和前端开发

数据双向绑定 => buildTemplete => compiler
a. 利用花括号 { { } } 构筑了数据与vm绑定关系
b.通过视图绑定事件来处理数据 => v-model :value @input

	//app.vue
	<template>
		<div @click="()=> message++ ">{{message}} - {{state.text}}</div>
		<a-component v-model="data1"></a-component>
	</template>
	
	// 组合式  有利于业务维护
	<script setup>
		import { reactive } from 'vue'
		
		const message = "welcome to baidu"
		const state = reactive({
			text: 'baidu'
		})
	</script>

	//选项式
	<script>
		export default {
			data() {
				return {
					message: 'welcome to baidu',
					state: {
						text: 'baidu'
					}
				}
			},
			method: {
				// ......
			}
		}
	</script>

buildTemplate => render()

	<template>
		<div class='data1'>{{data1}}</div>
	</template>

	//更改
	render(){
		return (
			<div class='data1'>{ data1 }</div>
		)
	}

	//优化能力 - domdiff
	<div class='data1' v-for="(item, index) in tempArray" :key='index'>
		{{item}}
	</div>

	// tick
	// render => vnode => dom

生命周期

vue的生命周期

创建阶段：beforeCreate(setup) => created(setup) => beforeMount => mounted
beforeCreate: new Vue() - 实例创建
created: data | props | methed | computed - 数据操作
beforeMount：获取vDom - 数据操作可以进行，不涉及Dom
mounted：Dom - 做任何操作

更新阶段：beforeUpdate => updated
beforeUpdate：获取vDom
updated：Dom

销毁阶段：beforeDestroy => destroyed
beforeDestroy：实例未被销毁
destroyed：实例被销毁

基础语法

	//HelloWord.vue
	<template>
		<div>
			{{ state.number }} -  {{ numberRef }}
			<div @click="handleAdd">加</div>
		</div>
		addMsg: {{ addMsg }}

		<div v-for='item in stateArr' :key='item'></div>
	</template>

	<script setup>
		import { 
		reactive,  // 复合类型封装响应式
		ref,	   // 简单类型响应式
		computed,
		 } from 'vue';

		const msg = 'welcome to'
		const state = reactive({
			number:0,
			stateArr: [0, 1, 2, 3, 4]
		})
		const numberRef = ref(0);

		const numberRef = function () {
			state.number ++
			numberRef.value ++
		}
	
		const addMsg = computed(()=> msg + state.number)
	</script>