Vue3学习笔记（待更）

已于 2024-05-28 08:30:06 修改
阅读量727 收藏 19
点赞数 19
分类专栏： 前端 文章标签： 学习 笔记 vue.js
于 2024-05-27 12:29:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_80742310/article/details/139234900
版权

Vue

  • 创建Vue工程：

    • 基于Vite创建

      • npm create vue

    • 打开env.d.ts文件,如果提示错误,就要安装依赖,打开终端

      • npm i

  • Vite项目中，index.html是项目的入口文件，在项目的最外层

  • 加载index.html后，Vite解析>指向的JavaScript

  • Vue3是通过createApp函数创建的一个实例应用

  • 语法

    • Vue2的API是Option(配置)风格

      • Options API的弊端:

        Options类型,数据,方法,计算属性是分散在data,methods,computed中的,若想修改或新增需求,就需要分别修改data,methods,computed,不便于维护和复印

    • Vue3的API是Composition(组合)风格

      • Composition API的优势:

        可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起

    • setup

      • setup是Vue3中的一个新配置项,组件中所用到的数据,方法,计算属性,监视均配置在setup中

      • setup(){
      console.log(this) //setup中的this是undefined，Vue3在弱化this了
      // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
      let name = '张三'
      let age = 18
      let tel = '13888888888'
      
      // 方法
      function changeName() {
        name = 'zhang-san' //注意：这样修改name，页面是没有变化的
        console.log(name) //name确实改了，但name不是响应式的
      }
      function changeAge() {
        age += 1 //注意：这样修改age，页面是没有变化的
        console.log(age) //age确实改了，但age不是响应式的
      }
      function showTel() {
        alert(tel)
      }
 
      // 将数据、方法交出去，模板中才可以使用
      return {name,age,tel,changeName,changeAge,showTel}
    }

      • setup函数返回的对象中的内容,可直接在模板中使用

      • setup中访问this是undefined

      • setup函数会在beforeCreate之前调用,它是领先所有钩子执行

      • setup的返回值:

        • 若返回一个对象:则对象中的:属性,方法等,在模板中均可以直接使用,如

          setup(){
	return {name,age,changname,showid}
}

        • 若返回一个函数:则可以自定义渲染内容,如

          setup(){
	return ()=>"世间你好"
}

      • setup语法糖;

        <template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
 
<script lang="ts">
  export default {
    name:'Person',
  }
</script>
 
<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'
 
  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

        • 指定组件名字的script标签也可以不写，借助vite的插件简化

          • 在终端中`npm i vite-plugin-vue-setup-extend -D

          • 打开vite.config.ts文件，改为

            • import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 
export default defineConfig({
  plugins: [ VueSetupExtend() ]
})

          • 以后就只用写一个script

            <script setup lang="ts" name="xxxx"></script>

      • ref 创建：基本类型的响应式数据

        • <template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
 
<script setup lang="ts" name="Person">
  import {ref} from 'vue'
   // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
  let name = ref('张三')
  let age = ref(18)
  // tel就是一个普通的字符串，不是响应式的
  let tel = '13888888888'
 
  function changeName(){
    // JS中操作ref对象时候需要.value
    name.value = '李四'
    console.log(name.value)
 
    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
  function changeAge(){
    // JS中操作ref对象时候需要.value
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    alert(tel)
  }
</script>
      • reactive 创建对象类型的响应式数据
        • <template>
  <div class="person">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{obj.a.b.c.d}}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>
 
<script lang="ts" setup name="Person">
import { reactive } from 'vue'
 
// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a:{
    b:{
      c:{
        d:666
      }
    }
  }
})
 
function changeCarPrice() {
  car.price += 10
}
function changeFirstGame() {
  games[0].name = '流星蝴蝶剑'
}
function test(){
  obj.a.b.c.d = 999
}
</script>
      • ref 对比reactive
        • ref用来定义：基本类型数据，对象类型数据
        • reactive用来定义：基本对象类型数据
        • ref创建的变量必须使用.value（可以用volar插件）
        • reactive重新分配一个新对象，会失去响应式（可以用Object.assign整体替代）
      • toRefs和toRef
        • <template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>
 
<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'
 
  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')
 
  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>
      • computer计算属性：

        • 根据已有数据计算出新数据

        • 底层借助了object.defineproperty方法提供的getter和setter方法

        • <template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span> <br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>
 
<script setup lang="ts" name="App">
  import {ref,computed} from 'vue'
 
  let firstName = ref('zhang')
  let lastName = ref('san')
 
  // 计算属性——只读取，不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */
 
 
  // 计算属性——既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })
 
  function changeFullName(){
    fullName.value = 'li-si'
  } 
</script>
      • watch监听：

        • 监听：监视数据的变化

        • 情况一：
          • <template>
  <div class="person">
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
 
<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 监视，情况一：监视【ref】定义的【基本类型】数据
  const stopWatch = watch(sum,(newValue,oldValue)=>{  //不写sum.value,因为sum才是ref定义的数据。而不是sum.value
    console.log('sum变化了',newValue,oldValue)
    if(newValue >= 10){
      stopWatch()  //回调一个停止监视的函数，此处是当newValue>10时，停止监视。
    }
  })
</script>
        • 情况二：
          • <template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
 
<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 数据
  let person = ref({
    name:'张三',
    age:18
  })
  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    person.value = {name:'李四',age:90}
  }
  /* 
    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，只有整个对象被改变的时候才会被监视到。
    若想监视对象内部属性的变化，需要手动开启深度监视
    watch的第一个参数是：被监视的数据
    watch的第二个参数是：监视的回调
    watch的第三个参数是：配置对象（deep、immediate等等.....） 
  */
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  },{deep:true})
  
</script>
        • 情况三：
          • <template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr>
    <h2>测试：{{obj.a.b.c}}</h2>
    <button @click="test">修改obj.a.b.c</button>
  </div>
</template>
 
<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
  // 数据
  let person = reactive({
    name:'张三',
    age:18
  })
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    Object.assign(person,{name:'李四',age:80})
  }
  function test(){
    obj.a.b.c = 888
  }
 
  // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  })
  watch(obj,(newValue,oldValue)=>{
    console.log('Obj变化了',newValue,oldValue)
  })
  
</script>
        • 情况四：
          • <template>
  <div class="person">
    <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>
 
<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
 
  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }
 
  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
  /* watch(()=> person.name,(newValue,oldValue)=>{
    console.log('person.name变化了',newValue,oldValue)
  }) */
 
  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
  watch(()=>person.car,(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
 
</script>
        • 情况五：
          • 
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>
 
<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
 
  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }
 
  // 监视，情况五：监视上述的多个数据
  watch([()=>person.name,person.car],(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
 
</script>
yourkin666
关注
  • 19
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 学习笔记
weixin_52253964的博客
10-29 871
Vue3 学习笔记
Vue3学习笔记
lirtyuj的博客
07-22 553
vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，提供了一套声明式的、组件化的编程模型，帮助更高效的开发用户界面。
vue3学习笔记
weixin_46448867的博客
03-01 192
vue3常用API学习笔记
Vue3笔记
m0_67445092的博客
01-08 970
打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%什么是hook？—— 本质是一个函数，把setup函数中使用到的Composition API（组合式API）进行了封装。类似于vue2.x中的mixin。自定义hook的优势：复用代码。让setup中的逻辑更清楚易懂。在工程目录下创建一个hooks文件夹，里面的文件命名规则useXxxx 明起意// 引入需要的组合// 创建函数 点击函数并且暴露出去// 实现鼠标点击获取坐标数据x: 0,y: 0})
vue3笔记
qq_31539817的博客
05-25 3004
第一章：vue3.0基础 1，认识vue3.0 vue3.0发布时间为2020-9-18，从项目体验上，vue3.0比起vue2.0有以下优势： 打包大小减少41% 初次渲染块55%，更新渲染块133% 内存占比少54% 2，新增内容 源码重构，新增特性，重写架构。 第二章：使用vue3.0 创建vue3.0有两种方式：使用vue-cli和使用vite i.使用cli： vue create vue-name 选择vue3.0项目 2，使用vite 安装vite ..
前端主流框架vue学习笔记第一篇
08-29
在学习 Vue 的过程中，我们可以从简单的 "Hello World" 开始。 首先，引入 Vue.js 框架是开始任何 Vue 应用的基础。在本例中，我们通过 CDN 引入了 Vue.js 2.4.1 版本。在 HTML 文件中，创建一个 `div` 元素并为其...
vue.js源代码core scedule.js学习笔记
10-19
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在Vue.js的核心源代码中，`scedule.js`（通常拼写为`...通过深入理解这一部分的源代码，开发者可以更好地优化Vue应用程序，提高其响应速度和用户体验。
代码学习笔记：个人编程学习笔记
02-26
代码学习笔记 个人编程笔记文档网站，持续更新中... Java和JavaWeb :sparkles:收集的案例 :sparkles: :sparkles: JavaSE基础 :sparkles: :sparkles: JavaWeb :sparkles: 初步框架 :sparkles: 春天 :sparkles: :...
vue.js添加待办事项样式特效.zip
10-09
学习这个项目，开发者可以掌握Vue.js组件化开发的思想，理解如何在组件中嵌入CSS样式和JavaScript逻辑，同时也能了解到如何利用jQuery来增强Vue应用的交互性。对于初学者来说，这是一个很好的实践案例，因为它涵盖了...
Vue3的基本语法及使用（vue3尚硅谷学习笔记）
vayne_1的博客
10-14 3607
适合初学vue3者，以及学习观看尚硅谷视频的同学，本文精简笔记内容
2024年Vue 3学习笔记：Vu3基础的完整指南
m0_63231347的博客
01-07 2756
这篇笔记中是在学习禹神最新Vue3教程记下来的，其中有一些自己写的笔记见解、搬禹神、vue、vite官网的一些笔记。主要目的还是给自己多一点知识点的总结。其实一遍下来，基本大部分都会，所以学习会很快。有几点我得好好在下面总结。
VUE3笔记
最新发布
m0_74737076的博客
02-20 1286
reactive（）作用作用：侦听一个或多个数据的变化，数据变化时执行回调函数。两个额外的参数：1.immediate(立即执行)，2.deep（深度侦听）
Vue3 学习笔记 —— 生命周期
Lyrelion的博客
09-17 2235
Vue3 学习笔记 —— 生命周期
vue3基本使用笔记（汇集精华版）
weixin_66721210的博客
03-16 494
vue3基本使用笔记（汇集精华版）
最新版本Vue3的学习笔记-第四章
apple_51927114的博客
12-26 1109
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被。作用：让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：控制路由跳转时操作浏览器历史记录的模式。作用：可以简化路由跳转及传参（后面就讲）。作用：将特定的路径，重新定向到已有路由。浏览器的历史记录有两种写入方式：分别为。参数时，需要提前在规则中占位。文件夹，一般组件通常存放在。掉的，需要的时候再去。的对象写法，必须使用。
尚硅谷---Vue3同步笔记
Father_Of_Soft的博客
03-05 2086
Vue3新特性介绍，Vue3入门到精通。尚硅谷Vue3教程同步笔记，方便您预习复习~
vue3学习笔记尚硅谷
08-12
在尚硅谷的Vue3学习笔记中，有几个与组件相关的内容。首先，在编写组件标签时，可以使用<school></school>标签。其次，可以在Vue组件中使用template来定义组件的结构和样式，也可以将组件的结构和样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值