Vue3 五天速成(上)

简介: Vue3 五天速成(上)

day 1

1. 创建vue3工程

相关代码如下:

## 创建vue工程
npm create vue@lastest
## 安装node_modules
npm install // npm i

创建工程完毕之后,进入文件夹可以发现有如下文件,下图是文件介绍:

入口文件介绍:

这里main.ts是与index.html建立联系的;

通过.mount('#app')这样 main.ts就与index.html建立起了联系;

其中main.ts的代码格式如下:

<template>
    <div>
        <h1>你好</h1>
    </div>
</template>
<script setup lang="ts">
    // js或者ts
</script>
<style scoped>
    /* 样式 */
</style>

App.vue的代码格式如下:

<template>
    <div class="app">
        <h1>你好</h1>
    </div>
</template>
<script setup lang="ts">
    // js或者ts
</script>
<style scoped>
    /* 样式 */
    .app {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

网页调试vue可以在chrome应用商店search vue.js devtools下载安装就好;

你好

### 2. 选项式API和组合式API

感觉vue2和vue3的主要不同就在于vue文件中script部分;其中vue2是选项式OptionsAPI的,vue3是组合式Composition的;

选项式API相关代码如下

注意,这里并没有setup

<script lang="ts">
    export default {
      // 定义组件名字
        name: 'Person',
        // 定义数据
        data(){
            return {
                name: '张三',
                age: 18,
                tel: '138888888'
            }
        },
        //  定义方法
        methods:{
            changeName(){
                this.name = 'zhang-san'
            },
            changeAge(){
                this.age += 1
            },
            showTel(){
                alert(this.tel)
            }
        },
    }
</script>

组合式相关代码如下

注意,这里的setup比beforecreate执行得还要早,setup的返回值也可以是渲染函数,data,method,setup可以同时存在,setup不可以读取data中的数据,反之则可以,因为setup是执行得最早的;

<script lang="ts">
    export default {
        name: 'Person',
        setup(){
            // 数据
            let name = '张三' // 此时name,age,tel 不是响应式的    应该改为ref或者reactive
            let age = 18    // 此时name,age,tel 不是响应式的  应该改为ref或者reactive
            let tel = '138888888'   // 此时name,age,tel 不是响应式的  应该改为ref或者reactive
            
            // 方法
            function changeName(){
                name = 'zhang-san'
            }
            function changeAge(){
                age += 1
            }
            function showTel(){
                alert(tel)
            }
            // 把数据和方法交出去
            return {name, age, changeAge, changeName, showTel}
        }
    }
</script>

setup语法糖简化后代码如下:

<script lang="ts">
    export default {
        name: 'Person',
    }
</script>
<script setup lang="ts">
    // 数据
    let name = '张三' // 此时name,age,tel 不是响应式的    应该改为ref或者reactive
    let age = 18    // 此时name,age,tel 不是响应式的  应该改为ref或者reactive
    let tel = '138888888'   // 此时name,age,tel 不是响应式的  应该改为ref或者reactive
    // 方法
    function changeName(){
        name = 'zhang-san'
    }
    function changeAge(){
        age += 1
    }
    function showTel(){
        alert(tel)
    }
    // 此时不需要return 自动提交
</script>

3. 响应式数据

响应式数据创建有两种方法,一种是ref,一种是reactive

ref定义基本类型的数据

使用的相关代码如下:

<template>
    <div class="app">
        <h2>姓名:{{ name }}</h2> // 利用大括号包起来的是不需要.value的
        <h2>年龄:{{ age }}</h2> // 利用大括号包起来的是不需要.value的
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>
<script setup lang="ts">
    import {ref} from 'vue'
    let name = ref('张三')
    let age = ref(18)   
    let tel = ref('138888888')
  // 在ref包裹住后,需要操作值都需要.value
    function changeName(){
        name.value = 'zhang-san'
    }
    function changeAge(){
        age.value += 1
    }
    function showTel(){
        alert(tel.value)
    }

这里值用ref包裹起来之后,变量会变成一个RefImpl类的数据,这时要修改值直接对变量操作是无意义的,我们需要对.value进行操作;这里要注意的是,ref也可以定义对象类的响应式数据,实现原理是先用ref包裹,再用reactive包裹,即取值还是需要用value

reactive定义对象类型的数据

使用的相关代码如下:

<template>
    <div class="app">
        <h2>姓名:{{ student.name }}</h2>
        <h2>年龄:{{ student.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Person',
    }
</script>
<script setup lang="ts">
    import {reactive} from 'vue'
    let student = reactive({name:'张三', age:18})
    function changeName(){
        student.name = 'zhang-san'
    }
    function changeAge(){
        student.age += 1
    }
</script>
<style scoped>
    /* 样式 */
    .app {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    
    button {
        margin: 10px;
    }
</style>

reactive包起来后,对象变成了一个Proxy的对象,原对象在Proxy里面的target中;这里的reactive是深层次的,只能定义对象类型的响应式数据;

refreactive的对比

这里要注意的是,重新分配reactive的对象时,使用Object.assign,但是如果是利用ref定义的对象类数据,我们是可以直接进行替换的;

对响应式数据进行解构,toReftoRefs

let person = reactive({
  name: '张三',
  age: 18
})
let {name, age} = person
// let name = person.name
// let age = person.age
let {name, age} = toRefs(person) //把reactive对象里面的每一组对象转化为ref
// let name = toRef(person, 'name')
// let age = toRef(person, 'age')

4. 计算属性

v-bind 是 单向绑定,数据流向页面;v-model 是 双向绑定,页面也可以流向数据;

计算属性 computed 是只要响应式变量出现了变化,就随之变化;

使用例子如下:

<template>
    <div class="app">
        姓名:<input type="text" v-model="name"> <br>
        年龄:<input type="text" v-model="age"> <br>
        information: {{ information }}
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Person',
    }
</script>
<script setup lang="ts">
    import {ref, computed} from 'vue'
    let name = ref('zhangsan')
    let age = ref(18)
    let information = computed(()=>{
        return name.value + age.value
    })
</script>
<style scoped>
    /* 样式 */
    .app {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

computed是用来区别于方法的,使用computed得到的属性是没有缓存的,而且computed得到的属性是不可修改的;如果需要修改,则需要使用以下方法:

<template>
    <div class="app">
        姓名:<input type="text" v-model="name"> <br>
        年龄:<input type="text" v-model="age"> <br>
        information: {{ information }} <br>
        <button @click="changeInformation">修改information为lisi</button>
        
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Person',
    }
</script>
<script setup lang="ts">
    import {ref, computed} from 'vue'
    let name = ref('zhangsan')
    let age = ref(18)
    let information = computed({
        get(){
            return name.value + '-' + age.value
        },
        set(val){
            const [s1, s2] = val.split('-')
            name.value = s1
            age.value = parseInt(s2)
        }
    })
    function changeInformation(){
        information.value = 'lisi-18'
    }
</script>
<style scoped>
    /* 样式 */
    .app {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>

day 2

5. watch 监视

情况1:监视ref定义的基本类型数据

停止监视只需要调用watch函数的返回值就可以;

<template>
    <div>
        <h5>情况1:监视【ref】定义的值是【基本类型】的数据</h5>
        sum : {{ sum }} <br>
        <button @click="changeSum"> sum + 1</button> <br>
        <hr>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Person'
    }
</script>
<script setup lang="ts">
    import {ref, watch} from 'vue'
    let sum = ref(1)
    function changeSum(){
        sum.value += 1
    }
    // 这里的sum是不需要添加.value的,返回值就是停止监视的函数
    const stopwatch = watch(sum, (newVal, oldVal)=>{
        console.log('sum变化了', newVal, oldVal)
        // 如果sum的最新值大于等于10则停止监视
        if(newVal >= 10 ){
            stopwatch()
        }
    })
</script>
<style scoped>
</style>

情况2:监视ref定义的对象类型数据

这里要注意的是:若修改的是ref定义的对象中的属性,newVal和oldVal都是新值,因为是同一个对象;若修改的是ref定义的整个对象,newVal是新值,oldVal是旧值,因为不是同一个对象;

<template>
    <div>
        <h5>情况2:监视【ref】定义的值是【对象类型】的数据</h5>
        姓名: {{ person.name }} <br>
        年龄: {{ person.age }} <br>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeFull">修改整个人</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Person'
    }
</script>
<script setup lang="ts">
    import {ref, watch} from 'vue'
    let person = ref({
        name: '张三',
        age: 18
    })
    function changeName (){
        person.value.name = '李四'
    }
    function changeAge (){
        person.value.age = 19
    }
    function changeFull (){
        person.value = {name: '王五', age: 20}
    }
    // 监视【ref】定义的【对象类型数据】,监视的是对象的地址值,若想要监视
    // 对象的内部属性的变化,需要手动开启深度监视deep
    // 若修改的是ref定义的对象中的属性,newVal和oldVal都是新值,因为是同一个对象
    // 若修改的是ref定义的整个对象,newVal是新值,oldVal是旧值,因为不是同一个对象
    // watch的第一个参数是:被监视的数据
    // watch的第二个参数是:监视的回调
    // watch的第三个参数是:配置对象(deep, immediate ... )
    watch(person, (newVal, oldVal)=>{
        console.log('person变化了', newVal, oldVal)
    }, {deep: true})
</script>
<style scoped>
    button {
        margin: 10px;
    }
</style>

情况3:监视reactive定义的对象类型数据

很简单,只需要把ref定义的对象改为reactive定义的对象,然后在修改整个对象的时候使用Object.assign替换就可以;

<template>
    <div>
        <h5>情况3:监视【reactive】定义的值是【对象类型】的数据</h5>
        姓名: {{ person.name }} <br>
        年龄: {{ person.age }} <br>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeFull">修改人</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Person'
    }
</script>
<script setup lang="ts">
    import {reactive, watch} from 'vue'
    let person = reactive({
        name: '张三',
        age: 18
    })
    function changeName (){
        person.name = '李四'
    }
    function changeAge (){
        person.age = 19
    }
    function changeFull (){
        // 并没有修改地址值;
        Object.assign(person, {name: '王五', age: 20})
    }
    // 监视【reactive】定义的对象类型数据,默认是开启深度监视的,而且深度是关不掉的
    watch(person, (newVal, oldVal)=>{
        console.log('person变化了', newVal, oldVal)
    })
    
</script>
<style scoped>
    button {
        margin: 10px;
    }
</style>

情况4:监视ref或者reactive定义的对象类型中的某个属性

<template>
    <div>
        <h5>情况4:监视【ref或reactive】定义的【对象类型】某个属性</h5>
        姓名: {{ person.name }} <br>
        年龄: {{ person.age }} <br>
        车辆:{{ person.car.c1 }}, {{ person.car.c2 }} <br>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeC1">修改c1</button>
        <button @click="changeC2">修改c2</button>
        <button @click="changeCar">修改car</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Person'
    }
</script>
<script setup lang="ts">
    import {reactive, watch} from 'vue'
    let person = reactive({
        name: '张三',
        age: 18,
        car:{
            c1: 'asd',
            c2: 'das'
        }
    })
    function changeName (){
        person.name = '李四'
    }
    function changeAge (){
        person.age = 19
    }
    function changeC1(){
        person.car.c1 = 'qqq'
    }
    function changeC2(){
        person.car.c2 = 'www'
    }
    function changeCar(){
        person.car = {c1:'yyy', c2:'jjj'}
    }
    // 监视响应式对象中的某个属性,且该变量是基本类型的,要写成函数式
    /* watch(()=>person.name, (newVal, oldVal)=>{
        console.log('person.name变化了', newVal, oldVal)
    }) */
    // 监视响应式对象中的某个属性,且该属性是对象类型的,可以直接写,也能写函数,推荐写函数
    watch(()=>person.car, (newVal, oldVal)=>{
        console.log('person.car变化了', newVal, oldVal)
    }, {deep:true})
    
</script>
<style scoped>
    button {
        margin: 10px;
    }
</style>

情况5:监视多个数据

<template>
    <div>
        <h5>情况4:监视【ref】定义的值是【对象类型】的数据</h5>
        姓名: {{ person.name }} <br>
        年龄: {{ person.age }} <br>
        车辆:{{ person.car.c1 }}, {{ person.car.c2 }} <br>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeC1">修改c1</button>
        <button @click="changeC2">修改c2</button>
        <button @click="changeCar">修改car</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Person'
    }
</script>
<script setup lang="ts">
    import {reactive, watch} from 'vue'
    let person = reactive({
        name: '张三',
        age: 18,
        car:{
            c1: 'asd',
            c2: 'das'
        }
    })
    function changeName (){
        person.name = '李四'
    }
    function changeAge (){
        person.age = 19
    }
    function changeC1(){
        person.car.c1 = 'qqq'
    }
    function changeC2(){
        person.car.c2 = 'www'
    }
    function changeCar(){
        person.car = {c1:'yyy', c2:'jjj'}
    }
    // 此时newVal和oldVal是数组与前面的对应
    watch([()=>person.name, ()=>person.age], (newVal, oldVal)=>{
        console.log('变化了', newVal, oldVal)
    })
    
</script>
<style scoped>
    button {
        margin: 10px;
    }
</style>

Vue3 五天速成(中)https://developer.aliyun.com/article/1504166?spm=a2c6h.13148508.setting.28.36834f0eJwPRIa

目录
相关文章
|
4月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
676 5
|
1月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
143 0
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
110 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
76 0
|
4月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
326 17
|
5月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
5月前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
348 6
|
4月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1372 0
|
6月前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
386 2
|
6月前
|
JavaScript 前端开发 算法
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~