Vue3的学习

create-vue创建vue3项目

create-vue是官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应

  • 前提环境条件:控制面板输入node -v,显示的是安装了16.0或更高版本的Node.js
  • 创建一个Vue应用:npm init vue@latest
  1. vite.config.js --- 项目的配置文件基于vite的配置
  2. package.json --- 项目包文件核心依赖项是vue3
  3. main.js --- 入口文件createApp函数创建应用实例
  4. app.vue --- 根组件SFC单文件组件script-template
    1. 脚本script和模板template顺序调整
    2. 模板template不再要求唯一根元素
    3. 脚本script添加setup表示支持组合式API
  5. index.html --- 单页入口,提供id为app的挂载点

创建项目和yun:

创建一个Vue应用:npm init vue@latest

接下来会需要输入项目名,此时输入的项目名是:vue_project

接下来输入执行下面的语句(之后如果要打开项目也是指令,终端要进入项目所在的目录)

cd vue_project

npm install

npm run dev(之后打开项目使用这条语句)

组合式API

setup

执行时,比beforeCreate还要早

setup函数中,获取不到this(this是underfined)

vue2的完整写法:

(定义数据+函数 然后以对象方式return)



vue3的语法糖可以简化return:

(使用组合式API)




reactive()和ref()

reactive()

接收一个对象类型的数据,返回一个响应式的对象



ref()

接收简单类型或复杂类型,返回一个响应式对象

本质:是在原有传入数据的基础上,外层包了一层对象,包成了复杂类型

底层:保存复杂类型之后,再借助reactive实现的响应式

注意:

  • 脚本中访问数据,需要通过.value
  • 在template中,.value不需要加(帮我们扒了一层)


computed

步骤:

  • 导入computed函数
  • 执行函数在
  • 回调参数中return基于响应式数据做计算的值,用变量接收

只读写法:

Vue3的学习_第1张图片

可写方法:

Vue3的学习_第2张图片

watch函数

监听一个或多个数据的变化,数据变化时执行回调函数

监听单个数据
  • 导入watch函数
  • 执行watch监听传入要监听的咸阳市数据(ref对象)和回调函数

Vue3的学习_第3张图片

监听多个数据

不管哪个数据变化都需要监听

1.其中第三个参数可以写immediate:true,可以立刻执行(例如在打开页面时)

Vue3的学习_第4张图片

2.deep深度监视,默认watch进行的是浅层监视

  • const ref1=ref(简单类型)可以直接监视
  • const ref2=ref(复杂类型)监视不到复杂类型内部数据的变化

3.对于对象中的单个属性,进行监视

Vue3的学习_第5张图片

组合式API下的数据传递

父传子

Vue3的学习_第6张图片

由于写了setup,所以无法直接配置props,此处借助于“编译器宏”函数defineProps接收传递的数据

defineProps原理

就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

Vue3的学习_第7张图片

子传父

  • 父组件中给子组件标签通过@绑定事件
  • 通过defineEmits编译器宏生成emit方法
  • 子组件内部通过emit方法触发事件

Vue3的学习_第8张图片

Vue3的学习_第9张图片

模板引用

概念:通过ref标识获取真实的都没对象或者组件实例对象

  1. 通过ref函数,生成一个ref对象 
  2. 通过ref标识,进行绑定
  3. 通过ref对象,value即可访问到绑定的元素

Vue3的学习_第10张图片

defineFxpose()

在默认情况下

你可能感兴趣的:(前端,vue,学习,前端,javascript)