摘要:一、概述 在了解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其实主要目的就是导出一个对象,这个对象里面有很多配置。 /
阅读全文