一. 创建vue3项目
create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应
1.1 使用create-vue创建项目
前置条件 - 已安装16.0或更高版本的Node.js
执行如下命令,这一指令将会安装并执行 create-vue
npm init vue@latest
因为只是初步学习vue3, 所有不需要其他的一些配置项
二. 组合式API
2.1 setup
原始的复杂写法
setup 相当于一个钩子函数, 是第一个执行的钩子函数, 在 beforeCreate 之前
<script>
export default {
setup(){
const message = 'message'
const logMessage = ()=>{
console.log(message)
}
//要想数据可以渲染到界面,必须return才可以
return {
message,
logMessage
}
},
beforeCreate(){
}
}
</script>
语法糖–简单写法
script标签添加 setup标记,不需要再写导出语句,默认会添加导出语句
<script setup>
//省略导入
const message = 'this is message'
const logMessage = ()=>{
console.log(message)
}
//省略return
</script>
2.2 reactive 和 ref
reactive 和 ref 的异同
同: 都是用来生成响应式数据
不同:
- reactive不能处理简单类型的数据
- ref参数类型支持更好,但是必须通过.value做访问修改
- ref函数内部的实现依赖于reactive函数
推荐: 推荐使用ref函数,减少记忆负担
reactive 创建响应式数据
reactive 适合创建对象的响应式数据
<script setup>
// vue3中, 通过reactive 和 ref 创建 --响应式--的数据
import { reactive, ref } from 'vue';
// reactive 适合创建对象的响应式数据
const info = reactive({
msg: 'Hello Vue3',
});
const onBtn = () => {
// console.log(msg);
info.msg = 'hello world';
};
</script>
ref 创建响应式数据
ref 可以创建 简单/复杂 数据的响应式
要获取ref 中创建的值 , 必须要在对象前面 加 value
变量名.value
<script setup>
// vue3中, 通过reactive 和 ref 创建 --响应式--的数据
import { reactive, ref } from 'vue';
// ref 可以创建 简单/复杂 数据的响应式
//1.简单
const age = ref(22);
// ref 修改值---age.value
const onAge = () => {
age.value++;
};
//2.复杂 user.value.name
const user = ref({ name: 'zz' });
const onUser = () => {
user.value.name = 'xx';
};
</script>
2.3 computed
计算属性基本思想和Vue2保持一致,组合式API下的计算属性只是修改了API写法
语法:
<script setup>
// 导入
import {ref, computed } from 'vue'
computed(function(){} )
</script>
使用:
- 只用
<script setup>
import { ref, computed } from "vue";
const list = ref([
{ id: 1, name: "zz", isChecked: true },{ id: 2, name: "xx", isChecked: false },{ id: 3, name: "ww", isChecked: false },
]);
const onAdd = () => {
list.value.push({ id: 4, name: "qq" });
};
//计算属性---计算list的长度
const count = computed(() => list.value.length);
</script>
- 既要用 , 又要改
<ul>
<li v-for="item in list" :key="item.id">
<input type="checkbox" v-model="item.isChecked" />
</li>
</ul>
<input type="checkbox" v-model="isAllChecked" /> 全选/全不选
_____________________________
//计算属性,既要用又要改
const isAllChecked = computed({
//用
get() {
return list.value.every((item) => item.isChecked);
},
//改
set(val) {
list.value.forEach((item) => (item.isChecked = val));
},
});
2.4 watch
侦听一个或者多个数据的变化,数据变化时执行回调函数
immediate控制立刻执行,deep开启深度侦听
简单数据类型
<script setup>
import { ref, watch } from 'vue';
//数据 count
const count = ref(22);
const setCount = () => {
count.value++;
};
//数据num
const num = ref(90);
const setNum = () => {
num.value++;
};
</script>
- 监听单个数据
<script setup>
/* 简单类型 */
//1.监听单个数据
watch(count, (newCount, oldCount) => {
console.log('count', newCount, oldCount);
});
</script>
- 监听多个数据
在侦听器创建时立即出发回调,响应式数据变化之后继续执行回调
<script setup>
/* 简单类型 */
//2.监听多个数据
watch(
[count, num], //多个数据 --数组--
([newCount, newNum], [oldCount, oldNum]) => {
console.log('新值', newCount, newNum);
console.log('旧值', oldCount, oldNum);
},
{
immediate: true, //监听器立即执行
}
);
</script>
复杂数据类型
通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep
<script setup>
/* 复杂类型 */
const userInfo = ref({
name: 'zz',
info: {
sex: 'boy',
},
});
const setSex = () => {
userInfo.value.info.sex = 'girl';
};
//监听复杂数据-----必须要开启深度监听
watch(
//默认情况下,深度监听对象,回调中的新值和旧值是同一个
//如果相对新旧值做区分
// 1.第一个参数,以函数的形式将那个值返回即可(此时没必要开启深度监听)
// userInfo,
() => userInfo.value.info.sex,
(newVal, oldVal) => {
console.log('userInfo', newVal, oldVal);
}
// {
// deep: true, //开启深度监听
// }
);
</script>
三. 生命周期函数
组合式生命周期函数, 可以执行多次
四. 组件通信
4.1 父向子传值
基本思想
- 父组件中给子组件绑定属性
- 子组件内部通过defineProps选项接收数据
4.2 子向父传值
基本思想
- 父组件中给子组件标签通过@绑定事件
- 子组件内部通过 defineEmits 方法触发事件
4.3 任意组件传值
基本思想
- 传值组件,通过 provide函数 传值
- 接收值的组件,通过inject 函数获取数据
传递数据/方法
provide('key',数据/ref对象/方法)
接收数据/方法
injext('key')
4.4 v-model:propName 语法糖
在vue2 中可以使用.sync 修饰符来对一个数据进行 既用又改 的操作
但vue3 中废弃了.sync 修饰符, 改用 v-model:propName 来代替 .sync 对数据 进行 既用又改 的操作
v-model:propName 的原理
- 绑定 :msg=“msg”
- 监听事件 @update:msg=“msg”
v-model:propName 和 .sync 一样 可以 多次使用
但如果组件中只有一个属性既要用又要改, 可以使用v-model
v-model 的原理
-
默认绑定的属性名:modelValue
-
默认监听的事件名: update:modelValue
五. ref引用标签/组件
实现步骤:
- 调用ref函数生成一个ref对象
- 通过ref标识绑定ref对象到标签
5.1 ref 获取标签
<h1 ref="h1Ref">ref dom 元素</h1>
___________________________________
<script setup>
import { onMounted, ref } from 'vue';
const h1Ref = ref(null);
//在onMounted 中 调用 标签
onMounted(() => {
console.log(h1Ref.value);
});
</script>
5.2 ref 获取组件
<my-ref ref="compRef" />
_________________________________
<script setup>
import MyRef from './MyRef.vue';
import { onMounted, ref } from 'vue';
const compRef = ref(null);
onMounted(() => {
//要想访问到组件内的数据,
//要在组件内通过defineExpose向外暴露
console.log(compRef.value.num);
});
</script>
注意:
默认情况下在
所有,要想访问组件内的数据和方法,都要通过defineExpose
才可以 defineExpose({ num });
<script setup lang="ts">
import { ref } from 'vue';
const num = ref(22);
// 当前setup语法糖场景下,组件内的属性和方法对外不可见
//可以通过 defineExpose 向外暴露
defineExpose({ num });
d(() => {
//要想访问到组件内的数据,
//要在组件内通过defineExpose向外暴露
console.log(compRef.value.num);
});
**注意:**
默认情况下在 <script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的
所有,要想访问组件内的数据和方法,都要通过`defineExpose`才可以 `defineExpose({ num });`
```js
<script setup lang="ts">
import { ref } from 'vue';
const num = ref(22);
// 当前setup语法糖场景下,组件内的属性和方法对外不可见
//可以通过 defineExpose 向外暴露
defineExpose({ num });