关于setup语法糖的信息
作为虚拟币行业人士而言，我们经常都会说到setup语法糖时有很多细节是需要注意的。你知道？今天就让小编跟你们说说吧！
根据原文内容的更新的内容主要有以下 5 块：
起初 Vue3.0 暴露变量必须 return 出来，template中才能使用；
这样会导致在页面上变量会出现很多次。
很不友好，vue3.2只需在script标签中添加setup，可以帮助我们解决这个问题。
组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，
甚至是自定义指令也可以在我们的template中自动获得。
在 script setup 中，
引入的组件可以直接使用无需再通过components进行注册，[是不是真的很香啊!]
并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。
当我们的页面上需要使用很多组件时，它的功能一下就体现出来了。
刚刚我一直在强调,不需要使用setup函数，机智的小伙伴会说:
那么子组件怎么接受父组件传递过来的值呢?
props，emit怎么获取呢?
别担心,新的api出现了,我们的主角 defineProps
父组件传递参数
子组件接受参数
子组件使用
父组件
子组件
父组件
v-memod会记住一个模板的子树,元素和组件上都可以使用。
该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。
如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。
即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。
因此渲染的速度会非常的快。
需要注意得是:正确地声明记忆数组是很重要。
开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。
v-memod的指令使用较少，它的作用是:缓存模板中的一部分数据。
只创建一次，以后就不会再更新了。也就是说用内存换取时间。
经过尤大大和团队的努力，style v-bind 已经从实验室毕业了。
我们可以使用这个属性了。爽歪歪！
我们可以在style中去使用变量。是不是感觉很牛逼呀！
现在我们用起来，第一次使用style v-bind
MVVM是 Model-View-ViewModel的缩写，
Model代表数据模型，定义数据操作的业务逻辑。
View代表视图层，负责将数据模型渲染到页面上。
ViewModel控制，通过双向绑定把View和Model进行同步交互，不需要手动操作DOM的一种设计思想。
1、增加了composition api
2、虚拟DOM重写
3、优化slots的生成
4、基于Proxy的响应式系统
5、TypeScript + 模块化
1、监控到数组下标的变化时，开销很大。所以Vue.js放弃了下标变化的检测；
2、Object.defineProperty只能劫持对象的属性，而Proxy是直接代理对象。
3、Object.defineProperty需要遍历对象的每个属性，如果属性值也是对象，则需要深度遍历。而 Proxy 直接代理对象，不需要遍历操作。
4、Object.defineProperty对新增属性需要手动进行Observe。vue2时需要使用 vm.$set 才能保证新增的属性也是响应式
5、Proxy支持13种拦截操作，这是defineProperty所不具有的
6、Proxy 作为新标准，长远来看，JS引擎会继续优化 Proxy，但 getter 和 setter 基本不会再有针对性优化
Vue实例从创建到销毁的过程，就是生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom – 渲染、更新-渲染、卸载等一系列过程，我们称这是Vue的生命周期。
总共可以分8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后
生命周期的钩子函数：有8个常规钩子和2个额外的钩子 = 10个
第一次页面加载会触发哪几个钩子?
第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这几个钩子
1、beforeCreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。
data，computed，watch，methods 上的方法和数据均不能访问。
读法（D-Fo-kri?e?t?d）
2、created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。一般初始化事件和异步请求放在这里调用
3、beforeMount：挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
4、mounted：挂载完成创建vue实例，和双向绑定，挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。
5、beforeUpdate：数据更新前，数据驱动DOM。在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。
可在更新前访问现有的DOM，如手动移出添加的事件监听器。
6、updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。组件DOM已完成更新，可执行依赖的DOM操作。
注意：不要在此函数中操作数据（修改属性），会陷入死循环。
7、beforeDestroy：销毁前，可做一些删除提示，如：您确定删除xx吗？
8、destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。这时组件已经没有了，无法操作里面的任何东西了。
9、额外的钩子：activated：在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了。
如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
10、额外的钩子：deactivated：组件被移除时使用。
1、执行顺序：
1）父组件开始执行到beforeMount 然后开始子组件执行，最后是父组件mounted。
2）如果有兄弟组件，父组件开始执行到beforeMount，然后兄弟组件依次执行到beforeMount，然后按照顺序执行mounted，最后执行父组件的mounted。
2、完成流程顺序
1）加载渲染过程：父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
2）子组件更新过程：父beforeUpdate-子beforeUpdate-子updated-父updated
3）父组件更新过程：父beforeUpdate-父updated
4）销毁过程：父beforeDestroy-子beforeDestroy-子destroyed-父destroyed
3、概念：
1）当子组件挂载完成后，父组件才会挂载。
2）当子组件完成挂在后，父组件会主动执行一次beforeUpdated/updated钩子函数（仅首次）
3）父子组件在data变化中是分别监控的，但是更新props中的数据是关联的。
4）销毁父组件时，先将子组件销毁后才会销毁父组件。
5）兄弟组件的初始化（mounted之前）是分开进行，挂载是从上到下依次进行
6）当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的
1、最大的改变就是setUp，setUp这个生命周期发生在beforeCreate和created之前。 两种形式的生命周期函数是可以共存，它们都会被执行。
2、其他都是大同小异，只不过换了写法前面加上了on 都写在setUp里面，在使用时需要按需引入函数
diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比，将变化的地方更新在真实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为0(N).
比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试；
如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；
借助key通常可以非常准确的找到相同节点，因此整个patch过程非常高效。
vdom是一种使用js对象来描述真实DOM的技术，通过这种技术,们能精确知道哪些真实DOM改变了，从而尽量减少DOM操作的性能开销。
computed:计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。
一个数据受多个数据影响
1、支持缓存，只有依赖数据发生改变，才会重新进行计算
2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化
watch:当需要在数据变化时执行异步或开销较大的操作时，一个数据影响多个数据
1、 不支持缓存，数据变直接会触发相应的操作；
2、watch支持异步；
methods:调用总会执行该函数，每次都会重新计算
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新
答：keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 比如说把某一个列表滑动到第100条位置，切换到一个组件后这次切换回该组件还会保持在100条的位置。
答：vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等
答：需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟DOM。 不写key 会导致所有列表DOM重新渲染，大大降低性能，同时编辑器也会报错。
答：当设置deep：true时，就可以深度监听到对象到内部值的变化。
答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：v-bind绑定一个value属性；v-on指令给当前元素绑定input事件。
答：delete只是被删除的元素成了空项，其他的元素键值还是不变。 Vue.delete 直接删除了数组，改变了数组的键值。
1、父传子：子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值 写法 ：key=”数据”
2、子传父：子组件通过 this.$emit(‘fn’,value) 来传递,父组件通过接收 fn 事件方法来接收回调 写法 ：@ 提交的事件 = 接收的函数
3、Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。
场景：多个组件共享数据或者是跨组件传递数据时
vuex的流程：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值
有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)
1、state：vuex的基本数据，用来存储变量
2、geeter：从基本数据(state)派生的数据，相当于state的计算属性
3、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4、action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
1、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
2、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便
1、vue-router 是什么?它有哪些组件？
答：vue用来写路由一个插件。有router-link、router-view， 重定向：redirect
2、vue-router 怎么定义动态路由? 怎么获取传过来的值？怎么获取当前的路由信息？
答：1）定义动态路由：在router目录下的index.js文件中，对path属性加上/:id。
2）获取传过来的值：使用router对象的params.id。
3）获取当前路由信息：使用this.$router获取当前的路由信息。 Vue 3.0 中通过 getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 属性获得当前上下文，ctx.$router 是 Vue Router 实例，currentRoute 可以获取到当前的路由信息
3、vue-router钩子函数有哪些？都有哪些参数？有哪些作用？
答：1）全局前置守卫：beforeEach((to, from, next)={})， 它接收3个参数，分别是 to：即将进入的路由对象。form：当前导航正要离开的路由。next()：进行管道中的下一个钩子
2）全局后置钩子：afterEach((to,form)={})
3）全局解析守卫：beforeResolve((to, from, next)={})
4）组件内导航钩子：beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不能获取组件实例 this// 因为当守卫执行前，组件实例还没被创建},
5）组件内导航钩子：beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用。// 可以访问组件实例 this},
6）组件内导航钩子：beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用 //可以访问组件实例 this}。
作用：vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。
4、vue中router与route区别
router：对象是全局路由的实例，是router构造方法的实例。比如 this.$router.push。 英标：[?ru?t?r , ?ra?t?r] 低音
route：对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。 英标：[ru?t] 重音
5、vue-router的两种模式的区别
答：1）hash模式：地址栏后面带有#号，当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作，做到单页面无刷新
2）history模式：主要使用HTML5的pushState()和replaceState()这两个api来实现的，pushState()可以改变url地址且不会发送请求，replaceState()可以读取 历史 记录栈,还可以对浏览器记录进行修改
他们最大的区别：
hash模式的hashchange，只能改变#后面的url片段。
history模式则会将URL修改的就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误
6、vue-router实现路由懒加载（ 动态加载路由 ）的方式有哪些?
7、vue-router 传参
Params：只能使用name，不能使用path，参数不会显示在路径上，浏览器强制刷新参数会被清空。
// 传递参数 this.$router.push({ name: Home， params: { number: 1 , code: ‘999’ } }) // 接收参数 const p = this.$route.params
Query：参数会显示在路径上，刷新不会被清空name 可以使用path路径
// 传递参数 this.$router.push({ name: Home， query: { number: 1 , code: ‘999’ } }) // 接收参数 const q = this.$route.query
Vue.js 是什么
Vue 项目往往需要使用 vue-router 插件，刚开始入门 Uni-app + Vue3 项目的同学，会不会想着路由使用 vue-router V4 版本不就可以了吗？
不怕大家笑话，我就是这样想的，毕竟我是第一次使用 Uni-app ，由于孕期记性贼差，所以我决定写成笔记，加深记忆。
uni-app 页面路由为框架统一管理的，我们需要在 page.json 文件里配置每个页面路由以及页面样式，有些类似小程序中的 app.json 文件，所以 uni-app 的路由用法和写法与 vue-router 不同。
项目初始化完成，对应的 page.json 文件为：
uni-app 通过 pages 节点配置应用都有哪些页面，接收一个数组，每个元素都是一个对象，属性有：
uni-app 页面路由跳转有两种方式：使用 navigator 组件跳转、调用API 跳转。
1、navigator组件跳转
类似于 a 标签，但是只能跳转到本地页面，目标页面必须在 page.json 中注册。
navigator 属性有：
open-type 有效值
2、uni-app API 跳转
使用 API 页面跳转方式有：
框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：
方式1：onLoad 接收
方式2：setup语法糖接收
onLoad 函数是监听页面加载，接收的参数是页面传递的数据，是一个 object 类型。
看到这，相信很快就能上手 uni-app + vue3 项目路由喽，也可以参考官网教程：
1、vite-plugin-vue-setup-extend
解决vue3下 script setup语法糖 下 ，手动设置组件name不方便的问题
npm i vite-plugin-vue-setup-extend -D
在文件vite.config.ts中
importsetupExtendfrom’vite-plugin-vue-setup-extend’;exportdefaultdefineConfig({plugins:[…setupExtend()],});
2、unplugin-auto-import
实现vue函数的自动导入,这样如ref, computed，watch等就不用手动导入了
npm i unplugin-auto-import-D
在文件vite.config.ts中
importAutoImportfrom’unplugin-auto-import/vite’;exportdefaultdefineConfig({plugins:[…AutoImport({imports:[‘vue’,’vue-router’,{vuex:[‘useStore’]}],resolvers:[],dts:false}),],});
当前无效与eslint冲突，如果直接使用依然会报错
这里采用了全局eslint还需安装 npm i eslint-plugin-auto-import? -D
顾最终配置如下
在vite.config.ts文件中
exportdefault({mode})={returndefineConfig({plugins:[AutoImport({include:[/.[tj]sx?$/,// .ts, .tsx, .js, .jsx/.vue$/,/.vue?vue/,// .vue/.md$/// .md],imports:[‘vue’,’vue-router’,{vuex:[‘useStore’]}],resolvers:[ElementPlusResolver()],dts:’,// eslint报错解决eslintrc:{// 此处为true运行后会生成.eslintrc-auto-import.json? auto-imports.d.ts文件enabled:true,// 此处第一次运行使用true,之后改为falsefilepath:’,// Default `globalsPropValue:true// Default `true`, (true | false | ‘readonly’ | ‘readable’ | ‘writable’ | ‘writeable’)}}),Components({resolvers:[ElementPlusResolver()]}),],});};
在.eslintrc.js文件中
extends:[…’],
在tsconfig.json文件中
compilerOptions: [? ? …? ? “types”: [“element-plus/global”]? ],”include”: […, “auto-imports.d.ts”],
3、unplugin-vue-components
实现vue组件库的自动按需导入,这样就不用手动导入了
npm i unplugin-vue-components -D
在文件vite.config.ts中
importAutoImportfrom’unplugin-auto-import/vite’;importComponentsfrom’unplugin-vue-components/vite’;import{ElementPlusResolver}from’unplugin-vue-components/resolvers’;exportdefaultdefineConfig({plugins:[vue(),AutoImport({imports:[‘vue’,’vue-router’,{vuex:[‘useStore’]}],resolvers:[ElementPlusResolver()],dts:false}),Components({resolvers:[ElementPlusResolver()]}),]});
4、vite-plugin-compression
静态资源压缩
npm i vite-plugin-compression -D
在文件vite.config.ts中
// 静态资源压缩importviteCompressionfrom’vite-plugin-compression’;exportdefaultdefineConfig({plugins:[…viteCompression({verbose:true,disable:false,// 不禁用压缩deleteOriginFile:false,// 压缩后是否删除原文件threshold:10240,// 压缩前最小文件大小algorithm:’gzip’,// 压缩算法ext:’.gz’// 文件类型})],});
5、rollup-plugin-visualizer
打包分析,可视化并分析构建包，查看哪些模块占用空间大小，以及模块的依赖关系
npm i rollup-plugin-visualizer -D
在文件vite.config.ts中
importvisualizerfrom’rollup-plugin-visualizer’;exportdefaultdefineConfig({plugins:[…visualizer({// 打包后自动打开分析报告open:true})],});
链接：
以上就是小编对setup语法糖和的总结，更多方面的知识可以关注我们，在网站首页进行搜索你想知道的！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 931614094@qq.com 举报，一经查实，本站将立刻删除。
