return {
conunt: 0,
};
},
methods: {
updateCount() {
this.conunt++;
},
},
在Vue3中
setup() {
// ref用于定义一个响应式的数据,返回的是一个Ref对象,对象中有一个value属性
//如果需要对数据进行操作,需要使用该Ref对象的value属性
const count = ref(0);
function updateCount() {
count.value++;
}
return {
count,
updateCount,
};
},
在Vue2
中我们通过this.$refs
来获取dom
节点,Vue3
中我们通过ref
来获取节点
首先需要在标签上添加ref='xxx'
,然后再setup
中定义一个初始值为null
的ref
类型,名字要和标签的ref
属性一致
const xxx = ref(null)
注意:一定要在setup
的return
中返回,不然会报错。
还是用一个例子来演示:让输入框自动获取焦点
App
—
语法
const proxy = reactive(obj)
作用
定义多个数据的响应式,接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy)
,响应式转换是“深层的”:会影响对象内部所有嵌套的属性,所有的数据都是响应式的。
代码演示
姓名:{{user.name}}
年龄:{{user.age}}
wife:{{user.wife}}
<button @click=“updateUser”>更新
setup() {
const user = reactive({
name: ‘hzw’,
age: 18,
wife: {
name: ‘xioaohong’,
age: 18,
books: [‘红宝书’, ‘设计模式’, ‘算法与数据结构’],
},
});
const updateUser = () => {
user.name = ‘小红’;
user.age += 2;
user.wife.books[0] = ‘金瓶梅’;
};
return {
user,
updateUser,
};
},
与Vue2
中的computed
配置功能一致,返回的是一个ref
类型的对象
计算属性的函数中如果只传入一个回调函数 表示的是get
操作
import { computed } from ‘vue’;
const user = reactive({
firstName: ‘韩’,
lastName: ‘志伟’,
});
const fullName1 = computed(() => {
return user.firstName + user.lastName;
});
return {
user,
fullName1,
};
计算属性的函数中可以传入一个对象,可以包含set
和get
函数,进行读取和修改的操作
const fullName2 = computed({
get() {
return user.firstName + ‘_’ + user.lastName;
},
set(val: string) {
const names = val.split(‘_’);
user.firstName = names[0];
user.lastName = names[1];
},
});
return {
user,
fullName2,
};
与Vue2
中的watch
配置功能一致,
-
参数1:要监听的数据
-
参数2:回调函数
-
参数3:配置
作用
监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
默认初始时不执行回调, 但可以通过配置immediate
为true
, 来指定初始时立即执行第一次
通过配置deep
为true
, 来指定深度监视
import { watch, ref } from ‘vue’;
const user = reactive({
firstName: ‘韩’,
lastName: ‘志伟’,
});
const fullName3 = ref(‘’);
watch(
user,
({ firstName, lastName }) => {
fullName3.value = firstName + ‘_’ + lastName;
},
{ immediate: true, deep: true }
);
return {
user,
fullName3,
};
watch
监听多个数据,使用数组
watch
监听非响应式数据的时候需要使用回调函数的形式
watch([()=>user.firstName,()=>user.lastName,fullName3],()=>{console.log(‘我执行了’)})
作用
监视数据发生变化时执行回调,不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据,默认初始时就会执行第一次, 从而可以收集需要监视的数据。
import { watchEffect, ref } from ‘vue’;
const user = reactive({
firstName: ‘韩’,
lastName: ‘志伟’,
});
const fullName4 = ref(‘’);
watchEffect(() => {
fullName4.value = user.firstName + ‘_’ + user.lastName;
});
return {
user,
fullName4,
};
watchEffect可以实现计算属性set方法
watchEffect(() => {
const names = fullName3.value.split(‘_’);
user.firstName = names[0];
user.lastName = names[1];
});
注意:3.0
中的生命周期钩子要比2.X
中相同生命周期的钩子要快
Composition API
还新增了以下调试钩子函数:但是不怎么常用
-
onRenderTracked
-
onRenderTriggered
代码演示
setup() {
onBeforeMount(() => {
console.log(‘–onBeforeMount’)
})
onMounted(() => {
console.log(‘–onMounted’)
})
onBeforeUpdate(() => {
console.log(‘–onBeforeUpdate’)
})
onUpdated(() => {
console.log(‘–onUpdated’)
})
onBeforeUnmount(() => {
console.log(‘–onBeforeUnmount’)
})
onUnmounted(() => {
console.log(‘–onUnmounted’)
})
}
作用
把一个响应式对象转换成普通对象,该普通对象的每个属性都是一个 ref
应用
我们使用reactive
创建的对象,如果想在模板中使用,就必须得使用xxx.xxx
的形式,如果大量用到的话还是很麻烦的,但是使用es6
解构以后,会失去响应式,那么toRefs
的作用就体现在这,,利用toRefs
可以将一个响应式 reactive
对象的所有原始属性转换为响应式的ref
属性。当然小伙伴们可以自行开发更多应用场景。
代码演示
name:{{name}}
作用
实现跨层级组件(祖孙)间通信
代码演示
父组件
父组件
当前颜色: {{color}}
<button @click=“color=‘red’”>红
<button @click=“color=‘yellow’”>黄
<button @click=“color=‘blue’”>蓝
子组件
子组件
孙子组件
孙子组件: {{color}}
===============================================================
作用
Teleport
提供了一种干净的方法, 让组件的html
在父组件界面外的特定标签(很可能是body
)下插入显示 换句话说就是可以把 子组件 或者 dom节点 插入到任何你想插入到的地方去。
语法
使用to
属性 引号内使用选择器
代码演示
//父组件
App
//子组件
<button @click=“modalOpen = true”>
点我打开对话框
class=“looklook”>
看看我出现在了哪里
<button @click=“modalOpen = false”>
Close
可以看到在子组件中的looklook
元素跑到了body
下面,而之前的位置默认出现了两行注释
作用
它们允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平滑的用户体验
语法
LOADING...
vue3
中引入异步组件的方式
const AsyncComp = defineAsyncComponent(() => import(‘./AsyncComp.vue’))
代码演示
父组件
LOADING...
子组件
AsyncComp22
{{msg}}
通过下图可以看到在异步组件加载出来之前,显示的是fallback
中的内容
作用
-
isRef: 检查一个值是否为一个
ref
对象 -
isReactive: 检查一个对象是否是由
reactive
创建的响应式代理 -
isReadonly: 检查一个对象是否是由
readonly
创建的只读代理 -
isProxy: 检查一个对象是否是由
reactive
或者readonly
方法创建的代理
代码演示
setup() {
const state1 = ref(1);
console.log(‘isref:’, isRef(state1));//isref: true
const state2 = reactive({});
console.log(‘isReactive:’, isReactive(state2));//isReactive: true
const state3 = readonly({});
console.log(‘isReadonly:’, isReadonly(state3));//isReadonly: true
const state4 = reactive({});
console.log(‘isProxy:’, isProxy(state2));//isProxy: true
console.log(‘isProxy:’, isProxy(state4));//isProxy: true
return {};
},
还有很多很多不常用的新特性,我在日常开发中是没有用到的,很多都是用来做优化的,感兴趣的小伙伴们自行去官网查看,或者大佬们可以介绍一下应用场景。
-
shallowReactive
-
shallowRef
-
readonly
-
shallowReadonly
-
markRaw
-
customRef
-
…
==============================================================
虽然Composition API
用起来已经非常方便了,但是我们还是有很烦的地方,比如
-
组件引入了还要注册
-
属性和方法都要在
setup
函数中返回,有的时候仅一个return
就十几行甚至几十行 -
…
-
不想写啊怎么办
好办,Vue3
官方提供了script setup
语法糖
只需要在script
标签中添加setup
,组件只需引入不用注册,属性和方法也不用返回,setup
函数也不需要,甚至export default
都不用写了,不仅是数据,计算属性和方法,甚至是自定义指令也可以在我们的template
中自动获得。
但是这么过瘾的语法糖,还是稍微添加了一点点心智负担,因为没有了setup
函数,那么props
,emit
,attrs
怎么获取呢,就要介绍一下新的语法了。
setup script
语法糖提供了三个新的API
来供我们使用:defineProps
、defineEmit
和useContext
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
常用的JavaScript设计模式
-
单体模式
-
工厂模式
-
例模式
函数
-
函数的定义
-
局部变量和全局变量
-
返回值
-
匿名函数
-
自运行函数
-
闭包
CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一个人可以走的很快,但一群人才能走的更远。如果你从事以下工作或对以下感兴趣,欢迎戳这里加入程序员的圈子,让我们一起学习成长!
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算
503)]
[外链图片转存中…(img-0G5GTCnq-1712245492503)]
[外链图片转存中…(img-gFioQWs6-1712245492503)]
[外链图片转存中…(img-mmBqWS11-1712245492503)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-orfBmVHq-1712245492504)]
常用的JavaScript设计模式
-
单体模式
-
工厂模式
-
例模式
函数
-
函数的定义
-
局部变量和全局变量
-
返回值
-
匿名函数
-
自运行函数
-
闭包
CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
一个人可以走的很快,但一群人才能走的更远。如果你从事以下工作或对以下感兴趣,欢迎戳这里加入程序员的圈子,让我们一起学习成长!
AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算