vue3
文章平均质量分 53
程序员Better
一个热爱分享交流,专注前端的程序员(全网同名) 关注程序员Better学习更多前端学习内容
展开
-
vue2&vue3数据响应式原理分析及手动实现
数据响应式视图跟数据是自动更新的,数据更新的时候视图是自动的更新的追踪数据的变化,在读取数据或者设置数据的时候能够做一些劫持的一些操作vue2 使用definePropertyvue3 改用Proxy使用defineProperty如何追踪变化var obj = {}var age Object.defineProperty(obj, 'age', { get: function() { consoel.log('get age ...') re原创 2021-10-07 11:35:20 · 380 阅读 · 1 评论 -
vue3 Suspense 异步请求组件使用
Suspense 异步请求组件使用前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,在vue2中判断异步状态是一件必要的事情,但是这些状态都要自己处理,于是在3中提供了suspense函数suspense中文含义是悬念的意思Suspense是有两个template插槽的,第一个default代表异步请求完成后,显示的模板内容。fallback代表在加载中时,显示的模板内容。写一个异步请求加载显示的组件<template> <h1>{{result原创 2021-03-03 21:06:08 · 2066 阅读 · 1 评论 -
vue3 Teleport瞬间移动函数的使用
vue3 Teleport瞬间移动函数的使用Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件",他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的以一个例子来看:编写一个弹窗组件<template><teleport to="#modal"> <div id="center" v-if="isOpen"> <h2><slot>this is a modal</slot原创 2021-03-03 11:38:08 · 629 阅读 · 2 评论 -
vue3-HOOKS模块化处理
vue3模块化处理vue3版本的更新,就是能搞更好的重用机制,可以把想要得模块独立出去eg:显示一个当前时间的工能,在多个页面需要调用的时候不用重复的调用可以在src目录下,新建一个文件夹hooks(所有抽离出来的功能模块都可以放到这个文件夹里),然后再新建一个文件useNowTime.js,这里使用use开头是一个使用习惯,代表是一个抽离出来的模块import { ref } from "vue";const nowTime = ref("00:00:00");const getNowTi原创 2021-03-02 10:44:12 · 2327 阅读 · 0 评论 -
vue3中使用watch注意事项
编写watch函数需要编写两个参数,第一个是要监听的值,然后是一个回调函数。在函数中你可以获得到新知和老值。使用watch的时候同样需要先导入监听使用ref定义的变量的时候时候,第一个参数直接使用import {... , watch} from "vue"setup() { const selectGirl = ref(""); const data = reactive({ girls: ["a", "b", "c"], selectGirl原创 2021-03-01 17:07:25 · 6291 阅读 · 2 评论 -
vue3的生命周期钩子与vue2生命周期对比理解
生命周期更新对于vue的生命周期想必大家都非熟悉,在项目中非常常用生命周期:伴随着生命周期,给用户使用的函数,操控生命周期,主要是操控钩子函数。vue3的生命周期setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和methodonBeforeMount() : 组件挂载到节点上之前执行的函数。onMounted() : 组件挂载完成后执行的函数。onBeforeUpdate(): 组件更新之前执行的函数。onUpdated(): 组原创 2021-03-01 17:06:47 · 887 阅读 · 0 评论 -
vue3.0中setup ref reactive toRefs 函数详解
vue3常用函数的使用setup 函数用法,可以代替Vue2中的data和method属性,直接把逻辑加在setup中ref 函数在temlate中用的变量需要用ref包装下return出去的数组和方法在模板中才可以使用 setup() { const girls = ref(["小红", "小英", "晓红"]); const selectGirl = ref(""); const selectGirlFun = (index) => {原创 2021-03-01 13:46:46 · 2111 阅读 · 0 评论 -
01-vue3的新特性
vue3新特性渐进式开发,向下兼容,vue3支持大多数vue2的特性,甚至可以说就拿vue2的语法来开发vue3是没有任何问题的性能的提升,更快更轻的体验.官方网站给出的数据是:打包大小减少 41%,初次渲染快 55%,更新快 133%,内存使用减少 54%推出Composition API,,在 Vue2 中遇到的问题就是复杂组件的代码变的非常麻烦,甚至不可维护。说白了就是封装不好,重用不畅。这个Composition API一推出,立马解决了这个问题,本套课程中也会重点介绍这部分内容。它是一系原创 2021-02-22 09:50:16 · 172 阅读 · 0 评论