<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p><img src="https://i-blog.csdnimg.cn/blog_migrate/40bacb2110afe1cbb98937b458.png" alt="在这里插入图片描述" /><br /> 简单来说一下vue3吧&#xff0c;</p> 

vue3呢基本兼容vue2 所以学习的小伙伴们也不用有过多的担心啦，
vue3 优点
1.按需引用，根据自己的需要，适当的引用自己用到的插件，从而减轻服务器的负担哦！
2.组合式的api: 这样有什么好处呢，更加接近原生的js,更加直观，语义明确，书写也简写，这样阅读更直观，不需要通过Vue再编译
3.没有this,细心的小伙伴已经发现vue3里面没有this了，这样呢更有效地降低了代码的耦合性，同时也增加了代码的复用性

vue2启动方式

讯享网

vue3 启动方式

相对来说vue3相对于Vue2来说较简单，不过问题不大相信小伙伴们会慢慢接受的

下面就来说一下 vue3的一些新特征吧

Setup(再beforecreated之前调用)
在 setup() 内部，this 不是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这使得 setup() 在和其它选项式 API 一起使用时可能会导致混淆。同时也验证了vue3的特点，

使用 setup 函数时，它将接收两个参数：
1.props
2.context

props
setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

讯享网

讯享网

响应性基础
声明响应式状态
要为 JavaScript 对象创建响应式状态，可以使用 reactive 方法：

讯享网

创建独立的响应式值作为 refs
我们想让它变成响应式的。当然，我们可以创建一个拥有相同字符串 property 的对象，并将其传递给 reactive。Vue 为我们提供了一个可以做相同事情的方法——ref

讯享网

下面就来说一下大家最关注的一点吧
Computed 与 watch
computed

watchEffect

讯享网

大家最最最关注的问题来了就是生命周期钩子函数(哦是吗?)往下看哦

所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文，所以 this 不会指向预期的组件实例，并且this.fetchTodos 将会是 undefined。
beforeCreate

• 类型：Function
• 详细：在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用
• 参考：生命周期图示(在下面哦)

created
类型：Function
详细：在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 \(el property 目前尚不可用。<br /> <strong>beforeMount</strong></p> <ul><li>类型&#xff1a;Function</li><li>在挂载开始之前被调用&#xff1a;相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。<br /> <strong>mounted</strong><br /> 在实例挂载完成后被调用&#xff0c;这时候传递给 app.mount 的元素已经被新创建的 vm.el 也会在文档内。 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等待整个视图都渲染完毕&#xff0c;可以在 mounted 内部使用 vm.\)nextTick：

beforeUpdate
类型：Function
详细：在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
updated
类型：Function

详细：
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或侦听器取而代之。
注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等待整个视图都渲染完毕，可以在 updated 内部使用 vm.\(nextTick&#xff1a;</p> <pre></pre> <p><img src="https://i-blog.csdnimg.cn/blog_migrate/8e0d6d83b5136c7188e95e8fd07ce4b9.png" alt="在这里插入图片描述" /><br /> 1&#xff1a;beforeCreate<br /> 在实例初始化之后&#xff0c;数据观测(data observer) 和 event/watcher 事件配置之前被调用。</p> <p>2&#xff1a;created<br /> 实例已经创建完成之后被调用。在这一步&#xff0c;实例已完成以下的配置&#xff1a;数据观测(data observer)&#xff0c;属性和方法的运算&#xff0c; watch/event 事件回调。然而&#xff0c;挂载阶段还没开始&#xff0c;\)el 属性目前不可见。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

会有下期更新哦