最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
el.style.position = “fixed”
el.style.left = binding.value.left+‘px’
el.style.top = binding.value.top + ‘px’
}
}
}
export default {
directives:autoFocus,
setup(){
const posData = {
left:20,
top:200
}
return {
posData,
}
}
}
三、teleport 传送门
teleport 传送门组件，提供一种简洁的方式，可以指定它里面的内容的父元素。通俗易懂地讲，就是 teleport 中的内容允许我们控制在任意的 DOM 中，使用简单。
使用语法：
需要创建的内容
to 属性是指定 teleport 中的内容加入的 DOM 元素。可以是标签名，也可以是 id 或类名。
为什么使用 teleport ？
使用 vue 开发时，都是在多个组件之间不断地嵌套，处理元素的样式或者层级的时候就会变得困难。如我们需要添加一个 modal 模态框或 toast 提示框，如果我们把这样的框可以从 vue 组件中剥离出来，我们样式和层级设置起来会更加简便。
有些同学会想，这直接放到 index.html 中不就好了吗？另外 modal 、toast 元素需要使用 vue 组件的状态值，通过状态控制 modal、toast 的隐藏显示。如果直接放入 index.html 则状态控制就复杂了。
所以 teleport 传送门组件就派上用场了。有点像“哆啦A梦”的任意门，可以把元素传送到任意的元素内。同时还可以使用 vue 组件内的状态值控制它。
四、setup
setup 用来写组合式 api，从生命周期钩子函数角度分析，相当于取代了 beforeCreate 。会在 creted 之前执行。内部的属性和方法，必须 return 暴露出来，将属性挂载到实例上，否则没有办法使用。setup内部没有 this ，所以不能挂载 this 相关的东西，它可以接收两个参数：props 和 context 。
setup 特性：
1、这个函数会在 created 之前执行，上述已解释。
2、setup 内部没有 this，不能挂载 this 相关的东西。
3、setup 内部的属性和方法，必须 return 暴露出来，否则没有办法使用。
4、setup 内部数据不是响应式的。
5、setup不能调用生命周期相关函数，但生命周期函数可以调用setup内的函数。
五、ref
ref 主要作用是使基础类的数据具备响应式能力，使用之前必须引入。在 Composition API中数据不具备响应式，修改数据时视图不会改变，所以在创建数据时，使用ref包裹一下，让数据具备响应式。
ref 使用：
import { ref } from “vue”
export default{
setup(){
let mood = ref(“此时心情好差呀！”)
setTimeout(()=>{
mood.value = “心情要变的像人一样美”
},3000)
return{
mood
}
}
}
六、reactive
让引用类型的数据具备响应式。
与上述的 ref 原理和用法都一致。
import { reactive } from “vue”
let me = reactive({
single:true,
want:“暖的像火炉的暖男”
})
七、readonly
让数据只读，不能修改数据。
父子组件之间传值时，Vue 是单向数据流，为了防止子组件修改数据，所以使用 readonly 包裹数据，保证只能在源数据上修改。
import { readonly } from “vue”
let me = readonly({
single:true,
want:“要一个对象”
})
八、toRefs
toRefs 用来解构 ref、reactive 包裹的响应式数据。
使用：
import { ref , reactive, toRefs } from “vue”
let me = reactive({
single:true,
want:“暖的像火炉的暖男”
})
const { single, want } = toRefs( me )
九、toRef
父子组件之间进行传值时，有些参数是可选参数，toRefs 解构参数不存在时就会报错，使用 toRef 解决该问题。
使用：
import { toRef } from “vue”
const love = toRef(obj,‘love’)
解构时先检查 obj 对象是否存在 love 属性，如果存在就继承obj对象中的属性值，如果不存在就会创建一个。
十、context
setup(props,context)。
context 上下文环境，其中包括了属性、插槽、自定义事件三部分。
setup(props,context){
const { attrs,slots,emit } = context
}
-
attrs 是一个非响应式的对象，主要接收 no-props 属性，经常用来传递一些样式属性。
-
slots 是一个 proxy 对象，其中 slots.default() 获取到的是一个数组，数组长度由组件的插槽决定，数组内是插槽内容。
-
setup 内不存在this，所以 emit 用来替换 之前 this.$emit 的，用于子传父时，自定义事件触发。
十一、watch 新用法
监听数据变化，做出相应的业务处理。在组合式api中，侦听器可以监听一个或多个属性，也可以是基础类型数据或引用数据类型。
watch 的特点：
-
有惰性：运行的时候，不会立即执行。
-
更加具体：需要添加监听的属性。
-
可以访问属性之前的值：回调函数内会返回最新值和修改之前的值。
-
可配置：可以添加配置项。
配置项
-
immediate：配置watch属性是否立即执行，值为 true 时，一旦运行就会立即执行，值为false时，保持惰性。
-
deep：配置 watch 是否深度监听，值为 true 时，可以监听对象所有属性，值为 false 时保持更加具体特性，必须指定到具体的属性上。
十二、watchEffect
是一个帧听器，也是一个副作用函数。它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。
watchEffect 特点：
-
非惰性：一旦运行就会立即执行。
-
更加抽象：使用时不需要具体指定监听的谁，回调函数内直接使用就可以。相比watch比较难理解。
-
不可访问之前的值：只能访问当前最新的值，访问不到修改之前的值。
watch 的前两个特点与 watchEffect 的两个特点刚好相反，watch 通过配置项可以修改成带有 watchEffect 特点
十三、computed 新用法
在组合式api中计算属性用法也发生了改变，使用之前需要引入。
import { ref, computed } from “vue”
export default{
setup(){
let sum = computed(()=>{
return …
})
}
}
也可以是选项式写法：
let sum = computed({
get:()=>{
return …
},
set:(value)=>{
return …
}
})
十四、provide / inject
provide发射数据或函数，inject 接收数据或函数。
project / inject 类似与发布订阅，主要用在组件传值层级太深，或兄弟组件没法传参，此时使用 project / inject 特别方便。
//发射
import { provide, readonly } from “vue”
provide(‘info’,readonly(info))
//接收
import { inject } from “vue”
const info = inject(‘info’)
最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！
可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
