摘要：一、概述 在了解vue render函数之前, 需要先了解下Vue的整体流程 通过上图, 应该可以理解一个Vue组件是如何运行起来的. 模板(template)通过编译生成AST树 AST树生成Vue的render渲染函数 render渲染函数结合数据生成vNode(Virtual DOM Node 阅读全文

摘要：scoped的由来 css一直有个令人困扰的作用域问题：即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。为了避免css样式之间的污染，vue中引入了scoped这个概念。 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签 阅读全文

摘要：export和import是ES6提出的模块化规范。这篇文章主要就是详细介绍export和import的用法。 export 模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出。 1. 输入变量用法 ⏰ 方法1 export let a = 'zh 阅读全文

摘要：1、defineComponent 是什么？ defineComponent 本身的功能很简单，但是最主要的功能是为了 ts 下的类型推到。对于一个 ts 文件，如果我们直接写 export default {} 这个时候，对于编辑器而言，{} 只是一个 Object 的类型，无法有针对性的提示我们 阅读全文

摘要：我们在使用vue3的时候常常使用props给父组件传值，但是在某些场景下，使用props传值会非常复杂，比如我们需要给某个子组件传值，同时这个子组件的某个隔了好几代的后代组件也需要使用到props里的某个属性，如果使用props来传递组件的话，需要按照父子关系一代代地写，这样很麻烦，而且容易传错。这 阅读全文

摘要：在vue2.x的插件那篇文章我们介绍过插件其实就是vue的增强功能。通常来为vue添加全局功能的。在vue3中插件的功能也是一样的，只是它们在定义上有所不同。 插件的作用场景 🐝 通过app.component()和app.directive()注册一到多个全局组件或自定义指令 🐝 通过app. 阅读全文

摘要：很多时候，我们可能会遇到一些需求，需要对某个元素或某类进行特殊的操作，这时候就可以使用自定义指令，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。 自定义指令 vue3中的自定义指令和vue2中的自定义指令差不多，也有两种定义方式：局部定义和全局定义。在作用上是一样的，只是在具体定义 阅读全文

摘要：watchEffect 🔊 官网的介绍 为了根据响应式状态自动应用和重新应用副作用，我们可以使用watchEffect方法，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。也就是说，我们并不需要传入一个特定的依赖源，而且它会立即执行一遍回调函数，如果函数产生了副作用 阅读全文

摘要：<script setup>是Vue3.2正式支持的一个语法糖，在<script setup>中的代码就像是在setup()函数中一样，所有顶级变量、函数、导入的组件都会暴露给模板使用（不用return） Vue3.0中：变量必须return出来才能在template中才能使用Vue3.2后：基于s 阅读全文

摘要：通过vue2, vue3两种形式实现同一个需求，理解vue3的compition api 带来的好处。✨两个独立的功能： 通过点击按钮来控制div的显示和隐藏通过点击按钮控制div内字体颜色的变化 用vue2实现 🌰 option Api 示例 <template> <div> <!-- 功能一模 阅读全文

摘要：vue3中的生命周期和vue2的生命周期不一样。主要差异就是多了一个setup钩子，取代了之前的creat相关的钩子。而且不再有destroy相关的生命周期了，取而代之的是unmount相关的生命周期。 生命周期如图所示： setup setup是vue3新出来的概念，是组合函数里面的一个生命周期钩 阅读全文

摘要：计算属性 我们一般使用计算属性来描述依赖响应式状态的复杂逻辑。 计算属性的用法 在vue3中计算属性的用法和在vue2中的不一样。 <template> <div>姓名:{{ fullname }}</div> </template> <script lang="ts"> //👀:需要什么导入什么 阅读全文

摘要：前面在介绍vue2的响应式原理中，我们已经介绍过vue数据响应式原理是通过数据劫持结合发布订阅者模式来实现的。其中在vue2中数据劫持是通过Object.defineProperty()来实现的，其中存在的问题是： 1. 新增、删除对象属性，视图不会更新2. 通过下标修改数组，视图不会更新 vue2 阅读全文

摘要：前面我们介绍过ref和reactive，toRef和toRefs。说白了toRef和toRefs可以看成是浅拷贝reactive对象的，那么我们这篇要介绍的shallowReactive和shallowRef就是浅层的reactive和ref。 回顾ref和reactive的区别 ref和react 阅读全文

摘要：toRaw和markRaw用来处理响应式对象和普通对象之间的转换的，其中toRaw是将响应式对象转成普通的原生对象，而markRaw是直接定义一个普通的原生对象，并且这个对象永远不能被转成响应式。 toRaw toRaw是返回reactive或readonly proxy的原始对象。也就是说将一个由 阅读全文

摘要：ref和reactive它们在用法上区别还是蛮大的，一个针对基本数据类型，一个针对复杂数据类型。而toRef和toRefs它们其实在用法上是很类似的，都是用来复制reactive里面的属性然后转成ref。因此既保留了响应式也保留了引用，也就是说它的复制其实是响应式ref和引用。要说区别的话那就是to 阅读全文

摘要：在vue2中定义数据在模板中使用的时候，只要不是那几种特殊情况，正常定义数据都是响应式的，但是在vue3中是不一样的，如果直接用=定义数据变量是不具有响应式的。 定义响应式数据 在使用ref和reactive定义响应式数据的时候，它们的使用场景是不一样的。 1. ref 使用方法 ⏰ 定义基本类型数 阅读全文

摘要：Vue 3.0中的setup函数是一个全新的选项，它是在组件创建时执行的一个函数，用于替代Vue2.x中的beforeCreate和created钩子函数。setup函数的作用是将组件的状态和行为进行分离，使得组件更加清晰和易于维护。 一、初识setup 1. 概念 setup函数是Vue 3.0新 阅读全文

摘要：一、安装 在创建vue项目之前，我们需要安装一些环境，比如：node, vue脚手架， npm等 1. 安装node 去官网下载：nodejs.org/en/ 下载最近版本，直接在首页下载就好 也可以下载之前的原始版本 nodejs.org/en/download… 如果之前已经安装过node, 可 阅读全文

摘要：vue.config.js文件 vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。 vue.config.js其实主要目的就是导出一个对象，这个对象里面有很多配置。 / 阅读全文