面向非前端开发者的Vue入门指引

本文不打算事无巨细的介绍Vue的所有知识点，只是在跟后端在理解一些前端的时候随手写的一些整理而来。本文只是给个指引，让你快速的了解Vue这类框架的一些核心知识。

以下几条为了初学者便于理解，有些你掌握这个框架后可能觉得不那么正确，但这不妨碍你快速理解这个框架。

 

一、无论是Vue2/Vue3还是React，最基础的开发单元是组件Component。【一般情况下】一个文件就是一个组件。

 

二、Vue3中定义变量、编写函数、页面变化都是在组件内的setup函数内去编写代码。通过export导出给其它组件使用。

 

三、组件之间相互隔离，除了跨组件通信库之外，初学者可以认为只能【通过属性向下传递数据】和【通过事件向上传递数据】。

 

四、Vue3页面通过Vue3提供的机制来感知你在setup中定义的变量的变化，从而作出改变。

    所以Vue3定义变量必须使用let a = ref(0)这样的方式才能让页面在引用a这个值的时候感知到a的变化。否则使用let a = 0这种定义方式，页面感知不到变量的变化。 

【let a = ref(0);let str = ref('abc');就是Vue3中定义变量的方式，这是它的一个基础语法】

 

五、什么是Vue的计算属性？

可以参考C#的一个语法，一个类Human中你定义了一个变量ZhouSui表示周岁年龄，但是还需要一个表示需岁的字段。这个时候你有两个选择，一个是定义一个需岁字段直接给它赋值来修改需岁年龄，另一种方式就是跟Vue中计算属性类似的在Human类中做如下定义:

public class Human {
    int ZhouSui = 18;
    int XuSui() {
        return this.ZhouSui + 1;
    }
}

这样只需要改变ZhouSui的值，XuSui跟着改变，这个就是计算属性。

【 Vue中使用computed函数来定义计算属性。】

 

六、组件的生命周期和钩子函数。

生命周期是一个组件从生到死的过程，即从它被其它组件引入，在内存中初始化，挂载到页面DOM展示，再到刷新组件数据，再到组件移除(页面不再需要显示这个元素)。

这个过程中Vue框架给出了一些挂载点，让你可以在这个组件的生命进行到某个时期的时候做一些事情。

【比如，你加载数据需要在onMounted(页面元素展示出来之后)，你销毁通过addEventListener注册的函数就要放在组件BeforeDestory（组件销毁前，清理资源）的时候。】

 

七、让前端项目复杂的一般是跨组件通信，比如Vuex。

组件相互隔离和引用，不会造成项目上比较大的复杂度。

但是类似于Vuex这样的跨组件通信库引入，会让变量、函数散落在不同的组件和文件中，在A文件中调用的函数可能是在B中定义的，但是调用后影响了C、D、E的相关逻辑。

Vuex/Mobx跨组件通信库这块跟前端框架关系不是很大，需要去这个通信库的文档去专门学习。