知识应该共享，创造才应收费

本人是一个从事Android开发5年的程序员，对各大优秀的编程语言都很感兴趣，Vue.js为啥会引起我的注意并且想学好它呢？一是因为Vue.js的理念和Android的Compose UI相似，可以对比学习，取长补短；其次，我想学习web应用的开发来做一些Web应用辅助Android的开发。实际上在Android开发中，多人开发的时候，不管是版本发布，还是自动打包，还是组件化，都离不开Maven仓库，打包服务器，还有邮件的折磨，在大公司里面，这一套都会有各种平台，比如京东的主站打包有一个专门的界面友好的We

在日常的开发中，很多时候我们需要去对一些状态进行监听，比如当显示学生的成绩列表时，我们使用一个学生的学号student_num作为请求成绩的参数，如果没有监听机制，当学号student_num改变时，我们需要依赖用户的操作去刷新成绩。但是有了侦听器，我们可以通过侦听器去监听student_num，当其发生改变时，自动去执行成绩刷新的操作。省去了很多冗余的逻辑。在Vue中，侦听器主要有两个，watch和watchEffect。下文将主要介绍他们的用法和区别。

作为程序员我们都知道写代码不仅要高效完成需求，还要让我们的代码优雅、可维护性更高。而可维护性即代码的可读性，因为我们写的代码就是公司的财产，当需要其他人维护的时候，可读性更高的代码会让维护你代码的人更快上手。本文说的computed计算属性就是为了这一目的来的，计算属性可以让我们的代码看起来不臃肿，可读性和可维护性更高，所以在介绍使用Compition Api生成计算属性之前，我们需要先介绍下啥是计算属性。

在Vue3中，将Vue2.0的option API 制作成hook函数，比如`watch,compute`方法等，在Vue3中新增的`setup()`方法中，可以以函数的形式去使用Vue2.0的`watch，compute`等属性，`setup`函数的调用时机是创建组件实例，然后初始化`props`,紧接着是调用`setup`函数，从生命周期的角度来看，它会在`beforeCreate`之前调用，所以在`setup`函数内是拿不到上下文对象的，它创建的是`data`和`method`.Vue3

render函数从名字上看就可以看出，它是一个用于渲染的函数，在Vue中我们要将我们写的界面展示到屏幕上时，使用的方式都是组件中的template:标签下编写内容后，由Vue将我们编写的界面渲染到屏幕上。而这个render函数就是比template更底层的函数，我们可以利用它直接渲染我们想渲染的内容。这样做的好处是性能更高，并且使用更加灵活。

在Vue中，代码传送就是将某部分的代码从Vue的template标签下传送到指定的地方，这个地方通常是body标签下。在使用Vue编写界面时，我们都是在html的Body中写一个div，然后指定一个id，然后在Vue的实例中的template中写我们的界面代码，然后由Vue来帮我们将templte中的dom元素渲染到界面上。

通过前面的学习，我们都有了一定的Vue知识，我们都知道可以在Vue实例创建后，在template标签中写我们的界面，当我们需要控制某个dom元素的显示或者隐藏时，我们可以使用v-if指令。循环打印一个列表时，我们可以使用v-for指令等…,然而这些指令都是Vue给我们提供的，我们其实可以自己定义我们的指令，其实我理解这个自定义指令就是把某个功能做一个封装，以这个指令提供给调用者使用。减少相同代码的重复编写。在Vue中，自定义指令可以有全局定义和局部定义两种方式，下面我们一起看下如何定义自定义指令

列表动画和状态动画都是增加用户体验的方法，当一个列表添加数据或者移除数据时，如果直接添加，突然显示，未免有些突兀，而且用户可能会不知道此时已经有数据加入了，从列表中移除数据也是，用户很有可能不知道当前已经移除了哪一条数据。但是如果加上动画就会好很多了，有趣的动画可以吸引用户的注意力，让用户关注新增和移除的数据。这就是列表动画，而状态动画是指从一个状态到另一个状态的变化，如果直接变过去，就会显得比较生硬，但是如果是加了动画慢慢过渡过去会好很多。

当我们使用某个软件或者网站完成一些交互的时候，会发现做得很好的网站和软件都少不了动画的润色，完成的功能都是从一个界面跳转到另一个界面，但是加动画和不加动画完全是两种不同的体验，而且动画还可以遮住一些缺陷，比如相机预览从16：9切换到4：3时会出现黑边的情况，这时加一个转场动画，用户就不会看到这个黑边了，同样在网站开发中如果说加载的另一个页面网络不太好时，我们可以使用一个加载动画，让用户感觉当前系统仍然正常。不会出现“卡死”的假象，本文我们就一起看下元素和组件之间的切换动画如何实现

动画的实现其实不仅可以使用CSS的方式实现，而且还可以使用js的方式实现，二者有啥区别呢？CSS更加注重动画的展现，性能更好，而js的方式性能稍微差点，但是可以在动画执行的每一个过程中做些额外的操作。也就是说动画执行的开始-执行中-结束这个过程，如果使用CSS来做，最多也就是控制下动画的属性啥的，只是为了展示动画。而使用js的方式，我们可以在动画执行开始时，操作dom元素，加我们想要的效果啥的，动画执行结束时我们可以做一些动画结束的操作，比如弹个对话框啥的。这些使用js实现 都会比较方便。

当我们的UI界面显示出来后，需要和用户进行交互，即用户点击某个控件，比如是一个按钮，需要跳转到另一个界面的时候，如果直接跳转到另一个界面，功能是实现了，但是未免有些生硬，因为用户体验不是很好，这时就需要动画的润色了，添加一个好的转场动画能让用户使用起来拥有更好的体验，并且动画还可以让一些耗时的任务看起来不那么“耗时”，比如当用户下载一个文件时，假如没有动画，系统一直卡在下载当那个页面（其实系统没有卡住，只是在下载，用户以为卡住了），那么下载完文件后就会直接显示一个下载完成的界面给到用户，用户是很蒙的。但是使

本章会介绍Vue的几个有用的知识点`v-once,ref,provide,inject`。当我们学会了如何将Dom元素渲染出来后接下来就是性能的考验了，因为我们不仅要展示出界面，还应该让界面流畅的运行，所以控制渲染的次数是很有必要的，这时v-once就派上用场了；有时我们需要获取到dom 节点以及组件的引用，我们就需要ref来实现，另外还有一对很有用的关键字就是`provide/inject`,它允许我们将值从父组件传递到孙子组件。

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

插槽可以传递dom元素，在子组件中通过接收使用父组件传递过来的dom元素，我的理解就是在定义一个组件时，有些dom是动态显示的，即子组件现在不清楚调用它的组件需要咋显示，是显示button还是div，所以使用slot先占一个位置，父组件确定要显示的dom后再显示。

组件间传值的章节我们知道父组件给子组件传值的时候，使用v-bind的方式定义一个属性传值，子组件根据这个属性名去接收父组件的值，但是假如子组件想给父组件一些反馈呢？就不能使用这种方式来，而是使用事件的方式，父组件通过注册这个事件的监听来接收子组件的信息，然后做对应的操作。

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

我们都知道父组件可以把值传递到自组件中，但是有时候子组件需要修改这个父组件传递过来的这个值，我们可以想象下能修改成功吗？这是坑之一。我们在组件间传值的时候，都是一个属性名对应一个值，接收的时候也是用这个属性名接收，那么每一个用户自定义的属性名都能被接收到吗？这是坑之二

我们学会了定义使用组件，但是我们似乎还缺少什么将组件之间联系起来，说到组件之间的联系就不得不提组件间的传值，而组件间的传值其实也不难理解，就是如何在子组件中接收到父组件传递到值。本文就介绍如何将父组件中的值传递到子组件中。

本文主要介绍了组件的概念和VUE3中定义和使用组件的方法。看完本文，读者应该能了解到全局组件和局部组件的定义和使用方法以及他们之间的区别。组件具有复用性，全局组件只要定义了，处处都可以使用，而且使用很简单，但是性能不高；局部组件定义后需要注册餐能使用，而且使用起来相对麻烦，但是性能比较高。

当我们开发完UI界面后，还需要和用户交互，所谓交互也就是用户可以点击界面上的按钮，文字，链接等以及点击键盘上的按钮，我们开发的程序可以做出对应的反应。做出的反应会通过UI界面再反馈给用户，或是对话框，或是跳转到新页面。总之就是响应用户的某个操作。在VUE3中定义事件绑定可以通过在你想注册点击事件的dom元素中，使用@click = "响应操作的JS函数"的方式来实现，方式不唯一，这种方式是一种简写，感兴趣的可以去官网查看不同的写法，这里主要是为了演示VUE3事件绑定

在Vue3中，当我们需要渲染一个数组中的数据到dom元素上时，就需要使用循环渲染。循环渲染可以节约我们大量重复冗余的工作，比如我们去渲染一个下拉菜单的时候，如果不使用循环渲染，那么我们需要手动一项一项的添加下拉菜单里面的内容，当下拉菜单中的内容比较少的时候我们还可以接受，但是当下拉菜单中的内容达到几百条的时候，我们就得一遍又一遍的添加选项，非常麻烦。但是使用循环渲染可以很好的结局这个问题，首先我们可以把要渲染的数据放到一个数组里面，再使用vue3提供的关键字v-for进行渲染

条件渲染就是在指定的条件下，渲染出指定的UI。比如当我们显示主页的时候，应该隐藏掉登录等一系列不相干的UI元素。即UI元素只在特定条件下进行显示。而在VUE3中，这种UI元素的显示和隐藏可以通过两个关键字，`v-if` 和`v-show`来实现。但是虽然实现的功能一样，但他们两者有着一些细微的区别。总结起来这个区别就是：v-show控制UI元素隐藏时只是将UI的显示状态变成了不可见，实际上这个UI是存在的，但是v-if隐藏UI元素时则是直接干掉了这个UI元素，使其不显示

如何开始上手vue框架，以及如何安装指定版本，本文适合初学者入门