vue3学习1

vite是新的官方构建工具,构建速度比webpack更快

vue项目的入口文件是index.html,一般在这里引入src/main.js,并且设置好容器#app

App.vue放的是根组件,components里放分支组件

vue组件中写三种标签,template & script & style

配置数据方式,放到data(){}中:

函数放到methods:{}中

以上配置项是vue2的写法,选项式API

vue3是组合式API,使用setup(){ 定义 + return },setup执行时间早于beforeCreate(),setup中没有this的定义,setup可以返回一个渲染函数

复制代码
import setupExtend from 'vite-plugin-vue-setup-extend' 可以通过name属性指定组件名

setup语法糖,自动return:

javascript 复制代码
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

vue3响应式数据-ref包裹的数据是响应式数据(对象),reactive包裹对象类型的数据

Object.assign(obj1, obj2) 可以更新reactive定义的对象

toRefs可以把reactive定义的每一组key:value变成ref类型的变量

toRef从reactive中一个一个取,其中更改nl,reactive中的age也会变

计算属性computed(()=>{return}),计算依赖的数据变化,就会重新计算,computed是ref变量

以下是只读的写法

可读可写,get set方法:

vue3-watch(监听):

可以监听四种数据:

1、ref定义的数据;

2、reactive定义的数据;

3、函数返回一个值(getter函数);

4、一个包含上述内容的数组。

vue2的watch写法:

vue3的watch写法,是一个函数,声明 监听对象和 回调函数(newValue, oldValue)

终止监听:

监听ref定义的对象类型的数据,监听的是对象的地址值,若想监听对象内部属性的变化,需要手动开启深度监听deep=true;想要立即监听,也要手动开启immediate=true ;

oldValue和newValue 也是监听的新老地址的值,若没变地址,则oldValue=newValue,大部分情况(监听对象地址不变)可以把newValue和oldValue合并成一个参数value。

reactive对象类型数据无法整体修改,必须通过Object.assign来修改

监听reactive对象类型数据,默认是开启深度监听的,隐式创建深层监听且无法关闭!

地址不变,则oldValue和newValue相同

监听对象中的某个值(基本类型的),需要构造getter函数,监听getter函数返回值

监听对象中的某个 子对象,可直接监听,也可以构造getter函数,

***建议写函数式,并加上deep=true(监听中最常用)

同时监视以上几种情况:

v-bind:value= 单向绑定(简写为:value=), v-modal:value= 双向绑定(简写为v-modal=)

v-for写法,v-bind:key=缩写成 :key=

相关推荐
自强的小白2 分钟前
vlan(局部虚拟网)
网络·学习
一只乔哇噻15 分钟前
java后端工程师进修ing(研一版 || day41)
java·开发语言·学习·算法
知识分享小能手29 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
知识分享小能手7 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
茯苓gao9 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾10 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT10 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
aaaweiaaaaaa10 小时前
HTML和CSS学习
前端·css·学习·html
看海天一色听风起雨落11 小时前
Python学习之装饰器
开发语言·python·学习
speop12 小时前
llm的一点学习笔记
笔记·学习