精华内容
下载资源
问答
  • vue2和vue3区别 千次阅读
    2022-02-22 15:39:37

    1. vue2和vue3双向数据绑定原理发生了改变

    1. vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。vue3中使用了es6的proxyAPI对数据进行处理。
    2. 相比与vue2,使用proxy API 优势有:defineProperty只能监听某个属性,不能对全对象进行监听;可以省去for in 、闭包等内容来提升效率(直接绑定整个对象即可);可以监听数组,不用再去单独的对数组做特异性操作,vue3可以检测到数组内部数据的变化。

    2.Vue3支持碎片(Fragments)

    就是说可以拥有多个跟节点。
    

    3. Composition API

    Vue2 与vue3 最大的区别是vue2使用选项类型api,对比vue3合成型api。旧得选项型api在代码里分割了不同得属性:data,computed,methods等;新得合成型api能让我们使用方法来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁。

    4. 建立数据data

    vue2是把数据放入data中,vue3就需要使用一个新的setup()方法,此方法在组件初始化构造得时候触发。使用一下三个步骤来简=建立反应性数据: 1. 从vue引入reactive;使用reactive() 方法来声明数据为响应性数据;3. 使用setup()方法来返回我们得响应性数据,从而template可以获取这些响应性数据。
    

    5. 生命周期

    vue2     --------------- vue3
    beforeCreate                         ->   setup()
    Created                                 ->   setup()
    beforeMount                          ->   onBeforeMount
    mounted                                ->    onMounted
    beforeUpdate                        ->    onBeforeUpdate
    updated                                 ->    onUpdated
    beforeDestroyed                    ->    onBeforeUnmount
    destroyed                              ->     onUnmounted
    activated                                ->     onActivated
    deactivated                            ->     onDeactivated
    

    6. 父子传参不同,setup()函数特性

    1. setup()函数接收两个参数:props、context(包含attrs、slots、emit)
    2. setup函数是处于生命周期beforeCreated和created俩个钩子函数之前
    3. 执行setup时,组件实例尚未被创建(在setup()内部,this不会是该活跃实例得引用,即不指向vue实例,Vue为了避免我们错误得使用,直接将setup函数中得this修改成了undefined)
    4. 与模板一起使用时,需要返回一个对象
    5. 因为setup函数中,props是响应式得,当传入新的prop时,它将会被更新,所以不能使用es6解构,因为它会消除prop得响应性,如需解构prop,可以通过使用setup函数中得toRefs来完成此操作。
    6. 父传子,用props,子传父用事件 Emitting Events。在vue2中,会调用this$emit然后传入事件名和对象;在vue3中得setup()中得第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
    7. 在setup()内使用响应式数据时,需要通过 .value 获取
    import { ref } from 'vue'
    const count = ref(0)
    console.log(count.value)
    
    1. 从setup() 中返回得对象上得property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加.value。
    2. setup函数只能是同步的不能是异步的。
    更多相关内容
  • Vue 3系列之03——Vue 3使用TypeScript

    千次阅读 2022-03-25 19:18:18
    静态类型系统可以帮助防止许多潜在的运行时错误,这就是为什么Vue 3是用TypeScript编写的。这意味着在Vue应用开发中,使用TypeScript进行开发不需要任何其他工具。TypeScript在Vue 3世界中是一等公民。 有两...

    随着应用规模的增长,越来越多的开发者认识到静态语言的好处。静态类型系统可以帮助防止许多潜在的运行时错误,这就是为什么Vue 3是用TypeScript编写的。这意味着在Vue应用开发中,使用TypeScript进行开发不需要任何其他工具。TypeScript在Vue 3世界中是一等公民。

    有两种方式,可以实现在Vue 3应用中支持使用TypeScript。

    1.   基于Vue 3 Preview创建的项目

    如果是选择Vue 3模板“Vue 3 Preview”进行项目创建,正如前文hello-world应用那样,则可以采用如下的步骤实现对TypeScript的支持。

    在应用的根目录下执行如下命令:

    vue add typescript

    此时,在命令行会出现提示框,根据提示选择即可。这里都是选“Y”即可,看到如下输出内容,则证明已经完成。

    2.   Manually select features(手动选择)方式

    如果是采用Manually select features(手动选择)方式创建应用,则直接可以选择TypeScript作为支持选项。具体步骤如下。

    选择“TypeScript”,而后回车。

    选择“3.x (Preview)”,而后回车。

     

    3.   TypeScript应用的差异

    相比于JavaScript的应用而言,TypeScript的应用的目录结构如下。

     

    l  多了TypeScript语言的配置文件tsconfig.json

    l  package.json和package-lock.json中多了对TypeScript等依赖的描述

    l  main.js改为了main.ts

    l  多了shims-vue.d.ts文件

    l  所有在Vue组件中使用JavaScript的地方,都改为了TypeScript

    参考引用

    1. 本系列归档至《跟老卫学Vue.js开发》:GitHub - waylau/vuejs-enterprise-application-development: Vue.js Enterprise Application Development. 《跟老卫学Vue.js开发》/《Vue.js 3企业级应用开发实战》源码
    2. 参考书籍《Vue.js 3企业级应用开发实战》:《Vue.js 3企业级应用开发实战(双色版)(博文视点出品)》(柳伟卫)【摘要 书评 试读】- 京东图书
    展开全文
  • vue2与vue3的区别

    万次阅读 多人点赞 2020-09-25 17:13:28
    Vue2和Vue3开发组件有什么区别 vue2和vue3双向数据绑定的区别 总结: 1. vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式...

    1. vue2和vue3双向数据绑定原理发生了改变

    vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

    vue3 中使用了 es6 的 ProxyAPI 对数据代理。

    相比于vue2.x,使用proxy的优势如下

    1. defineProperty只能监听某个属性,不能对全对象监听
    2. 可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
    3. 可以监听数组,不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

    2. Vue3支持碎片(Fragments)

    就是说在组件可以拥有多个根节点。
    vue2

    <template>
      <div class='form-element'>
      <h2> {{ title }} </h2>
      </div>
    </template>
    

    vue3

    <template>
      <div class='form-element'>
      </div>
       <h2> {{ title }} </h2>
    </template>
    

    3. Composition API

    Vue2与Vue3 最大的区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API)

    旧的选项型API在代码里分割了不同的属性: data,computed属性,methods,等等。新的合成型API能让我们用方法(function)来分割,相比于旧的API使用属性来分组,这样代码会更加简便和整洁

    vue2

    
    export default {
      props: {
        title: String
      },
      data () {
        return {
          username: '',
          password: ''
        }
      },
      methods: {
        login () {
          // 登陆方法
        }
      },
      components:{
                "buttonComponent":btnComponent
            },
      computed:{
    	  fullName(){
    	    return this.firstName+" "+this.lastName;     
    	  }
    }
     
    }
    
    

    vue3

    export default {
      props: {
        title: String
      },
      
      setup () {
        const state = reactive({ //数据
          username: '',
          password: '',
          lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性
        })
         //方法
        const login = () => {
          // 登陆方法
        }
        return { 
          login,
          state
        }
      }
    }
    

    4. 建立数据 data

    Vue2 - 这里把数据放入data属性中

    
    export default {
      props: {
        title: String
      },
      data () {
        return {
          username: '',
          password: ''
        }
      }
    }
    
    

    在Vue3.0,我们就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。

    使用以下三步来建立反应性数据:

    1. 从vue引入reactive
    2. 使用reactive()方法来声名我们的数据为响应性数据
    3. 使用setup()方法来返回我们的响应性数据,从而我们的template可以获取这些响应性数据
    import { reactive } from 'vue'
    
    export default {
      props: {
        title: String
      },
      setup () {
        const state = reactive({
          username: '',
          password: ''
        })
    
        return { state }
      }
    }
    

    template使用,可以通过state.username和state.password获得数据的值。

    <template>
      <div>
        <h2> {{ state.username }} </h2>
      </div>
    </template>
    
    

    5. 生命周期钩子 — Lifecyle Hooks

    Vue2--------------vue3
    beforeCreate  -> setup()
    created       -> setup()
    beforeMount   -> onBeforeMount
    mounted       -> onMounted
    beforeUpdate  -> onBeforeUpdate
    updated       -> onUpdated
    beforeDestroy -> onBeforeUnmount
    destroyed     -> onUnmounted
    activated     -> onActivated
    deactivated   -> onDeactivated
    
    1. setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method
    2. onBeforeMount() : 组件挂载到节点上之前执行的函数。
    3. onMounted() : 组件挂载完成后执行的函数。
    4. onBeforeUpdate(): 组件更新之前执行的函数。
    5. onUpdated(): 组件更新完成之后执行的函数。
    6. onBeforeUnmount(): 组件卸载之前执行的函数。
    7. onUnmounted(): 组件卸载完成后执行的函数
    • 若组件被<keep-alive>包含,则多出下面两个钩子函数。
    1. onActivated(): 被包含在中的组件,会多出两个生命周期钩子函数。被激活时执行 。
    2. onDeactivated(): 比如从 A组件,切换到 B 组件,A 组件消失时执行。

    6.父子传参不同,setup() 函数特性

    总结:
    1、setup 函数时,它将接受两个参数:(props、context(包含attrs、slots、emit))

    2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

    3、执行 setup 时,组件实例尚未被创建(在 setup() 内部,this 不会是该活跃实例的引用,即不指向vue实例,Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined

    4、与模板一起使用:需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

    5、使用渲染函数:可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态

    注意事项:

    1、setup函数中不能使用this。Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined

    2、setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。

    如果需要解构 prop,可以通过使用 setup 函数中的toRefs 来完成此操作:
    父传子,props

    import { toRefs } from 'vue'
     
    setup(props) {
    	const { title } = toRefs(props)
     
    	console.log(title.value)
    	 onMounted(() => {
          console.log('title: ' + props.title)
        })
    
    }
    

    子传父,事件 - Emitting Events

    举例,现在我们想在点击提交按钮时触发一个login的事件。

    在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。

    login () {
          this.$emit('login', {
            username: this.username,
            password: this.password
          })
     }
    

    在setup()中的第二个参数content对象中就有emit,这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

    然后我们在login方法中编写登陆事件
    另外:context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构

    
    setup (props, { attrs, slots, emit }) {
        // ...
        const login = () => {
          emit('login', {
            username: state.username,
            password: state.password
          })
        }
    
        // ...
    }
    

    3、 setup()内使用响应式数据时,需要通过.value获取

    import { ref } from 'vue'
     
    const count = ref(0)
    console.log(count.value) // 0
    

    4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 .value

    5、setup函数只能是同步的不能是异步的

    7. vue3 Teleport瞬移组件

    Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件",
    他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的
    以一个例子来看:编写一个弹窗组件

    <template>
    <teleport to="#modal">
      <div id="center" v-if="isOpen">
        <h2><slot>this is a modal</slot></h2>
        <button @click="buttonClick">Close</button>
      </div>
    </teleport>
    </template>
    <script lang="ts">
    
    export default {
      props: {
        isOpen: Boolean,
      },
      emits: {
        'close-modal': null
      },
      setup(props, context) {
        const buttonClick = () => {
          context.emit('close-modal')
        }
        return {
          buttonClick
        }
      }
    }
    </script>
    <style>
      #center {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        background: white;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;
      }
    </style>
    
    

    在app.vue中使用的时候跟普通组件调用是一样的

    <template>
    <div id="app">
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
      <HooksDemo></HooksDemo>
      <button @click="openModal">Open Modal</button><br/>
    <modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal>
    </div>
      
    </template>
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    import HooksDemo from './components/HooksDemo.vue'
    import Modal from './components/Modal.vue'
    import{ref} from 'vue'
    export default {
      name: 'App',
      components: {
        HelloWorld,
        HooksDemo,
        Modal
      },
      setup() {
        const modalIsOpen = ref(false)
        const openModal = () => {
          modalIsOpen.value = true
        }
        const onModalClose = () => {
          modalIsOpen.value = false
        }
        return {
          modalIsOpen,
          openModal,
          onModalClose
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    
    

    要是在app.vue文件中使用的时候,modal是在app的 DOM节点之下的,父节点的dom结构和css都会给modal产生影响
    于是产生的问题

    1. modal被包裹在其它组件之中,容易被干扰
    2. 样式也在其它组件中,容易变得非常混乱

    Teleport 可以把modal组件渲染到任意你想渲染的外部Dom上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
    使用的时候 to属性可以确定想要挂载的DOM节点下面

    <template>
      <teleport to="#modal">
        <div id="center">
          <h2>柏特better</h2>
        </div>
      </teleport>
    </template>
    
    

    在public文件夹下的index.html中增加一个节点

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <div id="modal"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    
    

    这样可以看到modal组件就是没有挂载在app下,不再受app组件的影响了

    在这里插入图片描述

    参考文档:

    Vue2和Vue3composition api区别

    vue2和vue3双向数据绑定的区别

    展开全文
  • VUE3 VUE-DEVTOOLS 安装

    千次阅读 2022-01-20 14:02:03
    Vue3 Vue-Devtools安装

    VUE3 Vue-Devtools 正确安装,亲测有效

    写在前面

    最近在学习Vue3。学习Vue自然离不开debug。Vue官方发布了调试工具Vue-Devtools。
    官方网址:Vue-Devtools

    对于Vue3,Vue-Devtools没有正式的发布,目前最高版本是 6.0.0-beta.21版。因此,无法像Vue2-Devtools那样通过 npm install vue-devtools这样的命令来安装。

    正确的安装方式

    只有两种:

    1. 从Chrome Web Store(针对chrome)或者Mozilla Addons website(针对Firefox)下载
    2. Github上下载源代码,进行编译。

    本文只讲述基于Chrome浏览器的安装,出于众所周知的原因,下面来讲第二种方式。

    下载源码

    进入官网,在分支上我们选择最新的 v6.0.0-beta.21
    v6.0.0-beta版本对应的是Vue3
    选好后会刷新当前页面,切换到 v6.0.0-beta.21 的内容页。
    刷新后,点击右侧的 Code 按钮,下拉项中选择 Download ZIP
    在这里插入图片描述
    当然,也可以通过Clone方式下载,具体操作不在这里描述。

    下载后解压到目录,解压后目录如下
    在这里插入图片描述
    在这里吐槽一下,网上好多的帖子都告诉你,在这里把 packages\shell-chrome目录里面的内容修改下,然后导入到Chrome的扩展里。亲们,这些说的都是错误的。虽然把src\hook.js文件里的build全部改为src,然后安装到扩展里确实能显示安装了扩展插件。但是:

    1. vue-Devtools的快捷键是灰色的。即使修改了 manifest.json"persistent": true也没用。
    2. 打开Vue3的网站后,Vue-Devtools后台会报错。

    这是为什么呢?因为以上安装的是源代码,没有编译啊
    在这里,作者走了不少弯路,浪费不少时间,不说了,都是泪。
    接来下,我们就说一下如何编译。

    编译

    NPM的安装就不多说了,我用的是最新版本8.3.1
    需要注意的是,安装Vue-Devtools的依赖需要用到yarn,而不是npm,所以首先我们要安装yarn。
    命令行进入到解压后的Vue-Devtools目录。
    在这里插入图片描述
    执行命令:

    npm install -g yarn
    

    安装好yarn,通过yarn来安装依赖

    yarn install
    

    依赖安装完成后,开始build。
    需要注意,这里的命令带了watch,如果不带watch,会出错。
    具体原因,我也不知道是为什么,如果哪位大神知道,望告知。

    yarn run build:watch
    

    代码执行一阵后,没有反应,此时Ctrl+C退出即可。
    接下来执行

    yarn run dev:chrome
    

    出现下面的界面后就可以Ctrl+C退出了。
    在这里插入图片描述
    此时,我们再看一下Vue-Devtools目录,发现生成了 build目录。
    在这里插入图片描述
    至此,编译完成。

    安装

    安装过程就不过于详细的介绍了,网上有好多。

    1. 打开 Chrome 的开发者模式。
      在这里插入图片描述
      在这里插入图片描述
    2. 拖拽 devtools-6.0.0-beta.21\packages\shell-chrome目录到上面扩展程序页面,会自动安装Vue-Devtools插件。
      在这里插入图片描述
    3. 在扩展栏固定Vue-Devtools图标
      在这里插入图片描述
      至此,Vue-Devtools插件安装完成,打开vue3网站,F12打开调试台,就能看到Vue-Devtools的界面按钮。
      在这里插入图片描述
      以上所写内容,实际上早在官网上就给出了完整操作步骤。但我开始是在网络上搜索相关的安装帖子,结果走了不少弯路。最后在官网找到了正确答案,还非常简单,让我有一种蓦然回首,那人却在灯火阑珊处的无奈。
      此后学习新的东西还是先从官网入手,引以为戒。
    展开全文
  • vue2和vue3的区别

    千次阅读 2022-02-21 15:09:16
    文章目录前言一、vue2和vue3双向数据绑定原理的区别?二、生命周期的变化三、diff不同 前言 一、vue2和vue3双向数据绑定原理的区别? vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行...
  • 学习Vue3 第一章

    千次阅读 多人点赞 2022-02-02 11:42:31
    1.介绍vue Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue...2.回顾vue2 对比 vue3 我们看如下图 发现传统的vue2 逻辑比较分散 可读性差 可维护性差 对比vue...
  • vue3vue3 setup如何使用props?

    千次阅读 2022-03-18 15:30:38
    setup是一个组件选项,在组件被创建之前,props 被解析之后执行。...子组件propsTest.vue: <script lang="ts"> import { toRefs } from 'vue' interface Data { [key:string]:unknown } export defaul
  • 手把手教你vue3引入vue-router路由

    千次阅读 2021-12-31 18:15:43
    在终端中输入 : vue add vue-next 将vue2升级成vue3项目 在终端中输入 : npm install vue-router@4 引入路由插件 注意后面的@4很重要 这是在声明安装的版本 当然 以后可能会有5 6等等 版本自然是越高越好
  • VSCode中Vue3插件使用整理_Vue3开发插件 Vue3代码语法不适合Vetur插件。需要安装其他的vue插件方便开发。 一、Vue 高亮显示Vue代码 插件地址:vue - Visual Studio Marketplace 注意:对应好作者,好多个叫vue的...
  • Vue 展示巨量数据,vue-virtual-scroller 使用说明 vue3 vue2 一、遇到的问题 最近在做的一个小工具中需要解决一个展示巨量数据列表的问题,数据有 8万 多条。 刚开始我是直接让它渲染的,结果用了60秒之多,我以为...
  • vue CLI 官网链接: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
  • vue3 怎么使用 vue devtools,vue3 报 Vue.js not detected

    千次阅读 多人点赞 2021-04-24 11:29:42
    vue3 怎么使用 vue devtools,vue3 报 Vue.js not detected重点vue devtools的安装vue devtools 使用测试 重点 –2021-4-21 记录一些使用vue devtools的坑 在学习vue的过程中,使用 vue devtools来进行调试会提高...
  • vue3 setup 使用教程

    千次阅读 多人点赞 2022-02-18 15:03:19
    vue3 中新增了 setup,它的出现是为了解决组件内容庞大后,理解和维护组件变得困难的问题。即 vue 中 data、computed、methods、watch 等内容非常多以后,同一业务逻辑的 data 中的数据和 methods 中的方法在 vue ...
  • 最近在学习vue3,在之前,先用vue2实现了个页面,然后基于Vue2改写成vue3的语法。 因为不是直接用的正式发布版的Vue3 Cli,我这里引入了 @vue/composition-api 使用vue3语法。 在使用...
  • vue3一步一步的详细讲解配置ESLint

    千次阅读 2021-06-02 13:23:01
    vue3配置ESLint前言环境说明安装standard规范初步总结vue 官方推荐安装 ESLint对比2个package.json再次总结airbnb规范总结 前言 对于前端项目而言,ESLint 可以检查代码,统一代码风格,避免不必要的错误。在 vue3 ...
  • VUE3对比VUE2的优势及新特性原理

    千次阅读 多人点赞 2020-10-27 10:00:09
    vue3新增了静态标记(patchflag)与上次虚拟节点对比时,只对比带有patch flag的节点(动态数据所在的节点);可通过flag信息得知当前节点要对比的具体内容 原因2:静态提升 vue2无论元素是否参与更新,每次都会重新...
  • 之前的vue项目中用到视频播放器,但是UI不是很好看,索性就打算写一个视频播放器插件紧随着vue3的发布,vue3的生态还不是很完整,就索性把这个视频播放器插件修改成了vue3版,最终使用vite2+vue3开发 插件Github...
  • Vue3和Vue2对比,我们如何选用?

    千次阅读 2022-01-12 22:02:35
    Vue3带来的新变化 性能提升(零成本:从vue2切到vue3就享受到) 首次渲染更快,diff算法更快,内存占用更少,打包体积更小,.... 更好的Typescript支持(在vue下写TS更方便了) 提供新的写代码的方式...
  • Vue3教程 3.响应式ref函数

    万次阅读 2022-03-23 22:48:20
    我们使用Vue3的setup,触发数据改变,但是数据不会及时更新到页面上,代码如下; <h2>{{ title }}</h2> <h2>{{ num }}</h2> <ul> <li v-for="(category, index) in categorys...
  • vue3中的setup函数

    万次阅读 多人点赞 2021-12-07 17:50:48
    一、概念: setup是vue3中的一个新的配置项,值为一个函数,我们在组件中用到的数据、方法等等,都要配置在setup中。 二、详解: setup函数的返回值有两种 1、返回一个渲染函数,可以自定义渲染内容(用得不多,了解...
  • vue3中已经移除了emit,emit,emit,on等方法,Eventbus通讯使用的是发布订阅的设计模式,可以自己实现一个。下面我用的是typescript // 为保持和vue2版本中使用bus一致,emit,on,off前面都加了$ class Bus { list: { ...
  • Vue2和Vue3中的生命周期钩子函数非常相似——我们仍然可以访问相同的钩子函数,并且我们仍然希望将它们用于相同的用例。但是,随着Composition API的引入,我们访问这些钩子函数的方式已经改变。到本文结束时,你将...
  • Vue3教程 1.Vue3的安装

    万次阅读 2022-03-23 22:43:23
    Vue3 官方给出了两种安装方式,一种是用脚手架安装,一种是vite。以下是安装时需要注意,可能会影响你安装失败: 1.node版本太旧了,或者要清除安装的缓存 2.yarn, cnpm是否安装更新 3.网络不好,推荐使用淘宝镜像 ...
  • Vue3使用axios的配置教程

    万次阅读 2022-03-23 12:00:12
    UserInfoParam) { return httpRequest({ url: 'your api url', method: 'post', data: param, }) } 接着在具体业务页面里使用这个请求,例如: <script setup lang="ts"> import { onMounted } from 'vue' ...
  • Vue3中的Vue Router初探

    千次阅读 2020-05-07 17:13:12
    对于大多数单页应用...Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router。我们将结合使用Alpha版本的Vue Router和当前的Vue3 Alpha版本进行研究。 本文告诉你如何将Vue Router添加到Vue3...
  • vben:vue3后台管理项目框架

    千次阅读 2022-02-28 13:47:20
    前言: Vue-Vben-Admin是一个基于Vue3.0、Vite、Ant-Design-Vue、TypeScript的后台解决...也可以作为一个示例,用于学习vue3、vite、ts等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。 官方入口:...
  • vue3使用vuex

    万次阅读 2021-04-06 11:02:48
    vue3 创建项目时勾选vuex,会自动生成一个store文件夹自带一个index.js index.js: // 引入 import { createStore } from "vuex"; import axios from 'axios'; export default createStore({ // 声明变量 state: ...
  • vue3 配置路由

    千次阅读 多人点赞 2021-06-10 18:28:46
    使用 vue3 配置路由,步骤如下 1、安装路由 npm install vue-router@4
  • vue3中实现音频播放器APlayer

    千次阅读 2022-02-15 16:58:41
    vue2的时候,分享了一个很好用的插件是vue-aplayer,但是他是不支持vue3的,这里分享vue3使用APlayer来实现一个播放器的方法。 实现效果: 官方: git地址:点我 api地址:点我 实现步骤: 1、安装 npm: ...
  • vue2 vue3 打印插件 vue-print-nb

    千次阅读 2021-06-08 11:00:40
    vue2 vue3 打印插件 vue-print-nb 目录:vue2 vue3 打印插件 `vue-print-nb`兼容性:Firefox 、Chrome都兼容,文档说还兼容IE版本:vue2、vue3都兼容地址([npm](https://www.npmjs.com/package/vue-print-nb))基本...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,619,017
精华内容 647,606
关键字:

Vue3