VUE3.0平地起高楼

本人是一个从事Android开发5年的程序员，对各大优秀的编程语言都很感兴趣，Vue.js为啥会引起我的注意并且想学好它呢？一是因为Vue.js的理念和Android的Compose UI相似，

watch具备懒加载，参数可以拿到原始值和当前值，用一个侦听器可以监听多个数据；而watchEffect侦听器是立即执行的，不需要传递要侦听的内容，它会自动感知代码依赖，但是watchEffect无法

而可维护性即代码的可读性，因为我们写的代码就是公司的财产，当需要其他人维护的时候，可读性更高的代码会让维护你代码的人更快上手。本文说的computed计算属性就是为了这一目的来的，计算属性可以让我们的

在Vue3中，将Vue2.0的option API 制作成hook函数，比如`watch,compute`方法等，在Vue3中新增的`setup()`方法中，可以以函数的形式去使用Vue2.0的`wa

render函数从名字上看就可以看出，它是一个用于渲染的函数，在Vue中我们要将我们写的界面展示到屏幕上时，使用的方式都是组件中的template:标签下编写内容后，由Vue将我们编写的界面渲染到屏幕

学习本文之前，我们需要弄清楚何为插件？插件其实就是一段扩展程序，主要目的是用于扩展功能。就比如Idea家族和VSCode家族的插件，它们也是一段扩展程序，将其安装到IDE中就可以使用插件里面实现的功能

在Vue中，代码传送就是将某部分的代码从Vue的template标签下传送到指定的地方，这个地方通常是body标签下。在使用Vue编写界面时，我们都是在html的Body中写一个div，然后指定一个i

通过前面的学习，我们都有了一定的Vue知识，我们都知道可以在Vue实例创建后，在template标签中写我们的界面，当我们需要控制某个dom元素的显示或者隐藏时，我们可以使用v-if指令。

列表动画和状态动画都是增加用户体验的方法，当一个列表添加数据或者移除数据时，如果直接添加，突然显示，未免有些突兀，而且用户可能会不知道此时已经有数据加入了，从列表中移除数据也是，用户很有可能不知道当前

当我们使用某个软件或者网站完成一些交互的时候，会发现做得很好的网站和软件都少不了动画的润色，完成的功能都是从一个界面跳转到另一个界面，但是加动画和不加动画完全是两种不同的体验，而且动画还可以遮住

动画的实现其实不仅可以使用CSS的方式实现，而且还可以使用js的方式实现，二者有啥区别呢？CSS更加注重动画的展现，性能更好，而js的方式性能稍微差点，但是可以在动画执行的每一个过程中做些额外的操作。

当我们的UI界面显示出来后，需要和用户进行交互，即用户点击某个控件，比如是一个按钮，需要跳转到另一个界面的时候，如果直接跳转到另一个界面，功能是实现了，但是未免有些生硬，因为用户体验不是很好

本章会介绍Vue的几个有用的知识点`v-once,ref,provide,inject`。当我们学会了如何将Dom元素渲染出来后接下来就是性能的考验了，因为我们不仅要展示出界面，还应该让界面流畅的运行

动态组件是可以让我们使用者通过一定的条件决定展示哪个组件，而异步组件可以让我们实现组件懒加载的功能，使大型项目可以拆成许多小js文件，使用时再组合，非常方便

插槽可以传递dom元素，在子组件中通过<slot>接收使用父组件传递过来的dom元素，我的理解就是在定义一个组件时，有些dom是动态显示的，即子组件现在不清楚调用它的组件需要咋显示

组件间传值的章节我们知道父组件给子组件传值的时候，使用v-bind的方式定义一个属性传值，子组件根据这个属性名去接收父组件的值，但是假如子组件想给父组件一些反馈呢？就不能使用这种方式来，而是使用事件的

组件间的双向绑定就是对于父组件的变更，子组件可以感知到，同样对于子组件的变更，父组件也可以感知到。这个过程是自动的。Vue中的双向绑定用`v-model`来实现

组件传值过程中的两个容易犯的小错误，一是父组件传递过来的值不能修改，二是父组件使用“-”分隔符定义属性传递值到子组件，子组件接收时需要将属性名改为驼峰命名方式

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。` 我觉得这个解释很官方，不好理解，我的理解是：组件其实就是完成一个功能的每一个模块的封装。

当我们开发完UI界面后，还需要和用户交互，所谓交互也就是用户可以点击界面上的按钮，文字，链接等以及点击键盘上的按钮，我们开发的程序可以做出对应的反应。做出的反应会通过UI界面再反馈给用户。