vue3官网 https://cn.vuejs.org/guide/quick-start.html
1. 创建一个项目
前提条件：已经安装18.3以上版本的node.js环境。
打开终端输入命令
image.png
2. 项目结构
image.png
3. 响应式
vue2使用defineProperty来为每个属性定义get和set方法。当属性被访问时，get方法会被调用。当属性变化，set会被调用，通知观察者更新视图。
vue3使用proxy来实现响应式，proxy是es6新特性，为了对目标的作用主要是通过handler对象中的拦截方法拦截目标对象target的某些行为（如属性查找、赋值、枚举、函数调用等）
- ref 官网推荐使用ref来定义属性，ref具有深层响应式。也就是改变嵌套的对象或者数组时，变化也将会被检测到。注：使用时要使用 .value 。在模板和插值语法中将会被自动结构不需要.value。即 {{ boj.b }}
const obj = ref( {a: [ a1: 2, a2: 3], b: 'bbb'} );
console.log(obj.value.b); // 'bbb'
- reactive 使用时不需要写.value。返回的对象直接是proxy对象。
注：不支持原始类型的响应式（如：string、number 或 boolean）。不能直接赋值会丢失响应式。解构后也将丢失响应式。具体可以看官网例子。
const obj = reactive( {a: [ a1: 2, a2: 3], b: 'bbb'} );
console.log(obj.b); // 'bbb'
4. 计算属性 computed
计算属性默认是只读的（官网中有可以修改的示例。但需要避免直接修改计算属性值）。和方法的区别是方法每次重新渲染都会重新计算，而计算属性类似一个响应式对象在模板中使用，当内部响应式数据变更时才会计算并存起来。即计算属性值会基于其响应式依赖被缓存。
const cont1 = ref( 5 );
const cont2 = ref( 3 );
const sum = computed(()=>{
return cont1.value + cont2.value
})
5. 侦听器 watch()和watchEffect()
watch 必须声明需要监听的对象
const x = ref(0)
const y = ref(0)
// 单个 ref
watch(x, (newX) => {
console.log(`x is ${newX}`)
})
// getter 函数 注意监听响应式对象的属性也需要用函数 () => obj.count,
watch(
() => x.value + y.value,
(sum) => {
console.log(`sum of x + y is: ${sum}`)
}
)
// 监听响应式对象的属性
watch(
() => obj.count,
(val) => {
console.log(obj.count)
}
)
// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
console.log(`x is ${newX} and y is ${newY}`)
})
watchEffect 在执行期间，它会自动追踪 todoId.value 作为依赖（和计算属性类似）。每当 todoId.value 变化时，回调会再次执行。有了 watchEffect()，我们不再需要明确传递 todoId 作为源值
const todoId = ref(1);
const data = ref(null);
watchEffect(async () => {
const response = await fetch(
`https://jsonplaceholder.typicode.com/todos/${todoId.value}`
)
data.value = await response.json();
})
注意：watch和watchEffect的区别：watch需要声明监听的对象，watchEffect只跟踪回调中被使用到的的响应式依赖
6. 生命周期
image.png
7. defineProps 组件声明可以接受的参数。props拥有单向数据流的特点，子组件不可以修改父组件props中的值。
<script setup>
const props = defineProps({
// 基础类型检查
// （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
propA: Number,
// 多种可能的类型
propB: [String, Number],
// 必传，且为 String 类型
propC: {
type: String,
required: true
},
// 必传但可为 null 的字符串
propD: {
type: [String, null],
required: true
},
// Number 类型的默认值
propE: {
type: Number,
default: 100
},
// 对象类型的默认值
propF: {
type: Object,
// 对象或数组的默认值
// 必须从一个工厂函数返回。
// 该函数接收组件所接收到的原始 prop 作为参数。
default(rawProps) {
return { message: 'hello' }
}
},
// 自定义类型校验函数
// 在 3.4+ 中完整的 props 作为第二个参数传入
propG: {
validator(value, props) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].includes(value)
}
},
// 函数类型的默认值
propH: {
type: Function,
// 不像对象或数组的默认，这不是一个
// 工厂函数。这会是一个用来作为默认值的函数
default() {
return 'Default function'
}
}
})
</script>
8. defineModel是一个便利宏（vue3.4+）
编译器将其展开为以下内容：
一个名为 modelValue 的 prop，本地 ref 的值与其同步；
一个名为 update:modelValue 的事件，当本地 ref 的值发生变更时触发。
3.4版本前
// 父组件
<Child
:modelValue="foo"
@update:modelValue="$event => (foo = $event)"
/>
// 子组件
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>
3.4版本后
// 声明 "modelValue" prop，由父组件通过 v-model 使用
const model = defineModel()
// 或者：声明带选项的 "modelValue" prop
const model = defineModel({ type: String })
// 在被修改时，触发 "update:modelValue" 事件
model.value = "hello"
// 声明 "count" prop，由父组件通过 v-model:count 使用
const count = defineModel("count")
// 或者：声明带选项的 "count" prop
const count = defineModel("count", { type: Number, default: 0 })
function inc() {
// 在被修改时，触发 "update:count" 事件
count.value++
}
image.png
- provide 和 inject
一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。
// 父组件provide传值
<script setup>
import { provide } from 'vue'
provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>
// 后代组件inject接收
<script setup>
import {inject} from 'vue'
inject('message');
</script>
