安装

   //使用yarn构建
//安装yarn 需要管理员权限
sudo npm i yarn -g
yarn create vite
cd ..
yarn
yarn dev

目录结构

    见名知义

四种语法范式

vue3中可以不需要根标签

  1. 选项式写法, vue2写法 , Vue3兼容vue2选项式写法,不推荐 选项写法都有组合API实现
  2. 组合式写法, 只使用setup ,相当于vue2中的created(),setup可以理解成是组件生命周期的第一阶段,
<template>
//在模版中使用ref响应数据时 不需要.value取值
</template>
<script>
impprt {ref} from 'vue'
export default(
//组合式写法入口
setup(){
let msg = ref('hello') //num叫ref变量 ref对象
console.log(msg.value) // 在js中操作需要.value才能取到响应数据值
return {num} // setup中定义了响应式数据,要在模版中使用, 必须return出去
}
)
<script>
  1. 选项式+组合式 不推荐
  2. 组合式语法糖写法 推荐
   <script setup lang="ts">
import { ref } from 'vue';
let num = ref(100)
let add = ()=>{
num.value++
}
</script> <template>
<h1>组合式语法糖写法</h1>
<h1 v-text="num"></h1>
<button @click="add">+++</button>
</template> <style scoped>
</style>

hooks

抽离业务逻辑代码到单独的hook文件  定义一个函数 并return所有数据和方法 最后exprot出去,在组件中通过import 导入 ,调用该函数声明一个对象来接收所有数据和方法
//Surga.vue

    import useCount from './hooks/useCount.ts'

    let {num, add, sub} = useCount()
//useCount.ts import { ref, reactive } from 'vue';
function useCount() {
let num = ref(100)
let add = () => {
num.value++
}
let sub = () => {
num.value--
}
return{
num,
add,
sub
}
}
export default useCount

setup用法

    //定义在script标签上  不用return返回  语法糖
<script setup>
//dosomething...
</script> //定义在script 内部 需要return返回
<script>
exprot default({
setup(){
const a = ''
const fun = ()=>{}
return {a,fun}
}
})
</script>

响应式 ref

  1. ref操作基本数据类型(string,number,boolean)
  2. isRef 判断一个数据是否为ref对象 isRef(xxx) //返回true/false
  3. unRef 如果传递一个ref对象,得到ref对象的value值;如果传递一个非ref对象,得到数据本身
  4. customRef 自定义ref
        <script setup >

        import {ref,customRef,onRenderTracked,onRenderTriggered} from 'vue'
let num = ref(100)
let add = ()=>{num.value++}
let sub = ()=>{num.value--}
//自定义customRef
let name = customRef((track,trigger)=>{
let value = ''
return{
// 使用name时,调用get
get(){
track() //当name被使用时,执行track(),调用onRenderTracked
return value
},
set(val){
trigger() //当name被修改时,执行trigger(),调用onRenderTriggered
value = val
}
}
})
//仅供在开发环境下,用于ref的变量调试
onRenderTracked((ev)=>console.log('name被访问了',ev))
onRenderTriggered((ev)=>console.log('name值被修改了',ev))
</script> <template>
<h1>组合式API</h1>
<h1 v-text="num"></h1>
<button @click="add">+++</button>
<button @click="sub">---</button>
<input type="text" v-model="name"> </template>
  1. toRef 可以把reactive对象中的某个属性变成ref对象
// toRef  可以把reactive对象中的某个属性变成ref对象
let nameToRef = toRef(user,'nickName') //nameToRef变成了一个ref对象, 该方法接收两个params, 对象 - 属性
  1. shallowRef 和 ref() 不同,浅层 ref 的内部值将会原样存储和暴露,并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。
  2. triggerRef()

    强制触发依赖于一个浅层 ref 的副作用,这通常在对浅引用的内部值进行深度变更后使用。
  3. reactive isReactive(检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。)
  4. readonly isReadonly (只读对象的属性可以更改,但他们不能通过传入的对象直接赋值。)
  5. isProxy 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。
  6. toRaw 变为原始对象
  7. markRaw 标记为原始对象
  8. shallowReactive shallowReadonly
  9. computed
  10. watch
  11. watchEffect
    1. watchEffect //{flush:'pre'} 最先执行
    2. watchPostEffect //{flush:'post'} 最后
    3. watchSyncEffect //{flush:'sync'} 按顺序同步执行,如果在pre前就先执行

生命周期 钩子函数

vue2中有8个周期
  1. beforeCreate created 被setUp代替
  2. 在vue3中生命周期都是组合式API 都是以on开头
  3. 在v2中有beforeDestory/destroyed 在v3中onBeforeUnmount / onUnmounted
  4. 新增两个钩子函数 onRenderTracked/onRenderTriggered

onBeforeMount


defineProps 用法


defineEmits用法

Vue3学习笔记(1)的更多相关文章

  1. vue3 学习笔记 (二)——axios 的使用有变化吗?

    本篇文章主要目的就是想告诉我身边,正在学 vue3 或者 准备学 vue3 的同学,vue3中网络请求axios该如何使用,防止接触了一点点 vue3 的同学会有个疑问?生命周期.router .vu ...

  2. vue3 学习笔记 (四)——vue3 setup() 高级用法

    本篇文章干货较多,建议收藏! 从 vue2 升级到 vue3,vue3 是可以兼容 vue2 的,所以 vue3 可以采用 vue2 的选项式API.由于选项式API一个变量存在于多处,如果出现问题时 ...

  3. vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽

    刚开始使用 script setup 语法糖的时候,编辑器会提示这是一个实验属性,要使用的话,需要固定 vue 版本. 在 6 月底,该提案被正式定稿,在 v3.1.3 的版本上,继续使用但仍会有实验 ...

  4. vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能?

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类 ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  7. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  8. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  9. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  10. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

随机推荐

  1. vue项目部署在nodejs+express

    一.安装node和打包vue项目就不用多说了 二.安装express Express是一个保持最小规模的灵活的Node.js web应用程序开发框架,为web和移动应用程序提供一组强大的功能 npm ...

  2. rt-thread模糊到清晰系列: irq.c

    #include <rthw.h> #include <rtthread.h> // 进入离开中断的钩子函数 #ifdef RT_USING_HOOK static void ...

  3. Spring Boot整合JSP --CRUD

    Springboot整合JSP spring boot与视图层次的整合: JSP 效率低 Thymeleaf java Server page 是Java提供的一种动态的网页技术,低层是Servlet ...

  4. MFC中的RTTI(Runtime Type Identification, 运行时类型识别)详解(参考《深入浅出MFC》)

    在MFC中的RTTI的实现,主要是利用一个名为CRuntimeClass的结构来链接各个"有关系的类"的信息来实现的.简单来说,就是在需要用到RTTI技术的类内建立CRuntime ...

  5. Docker全方位攻略与自动化运维

    介绍 Docker Registry(Docker注册中心)是一个管理Docker容器镜像存储和交付的应用程序.注册中心集中容器镜像并减少开发人员的构建时间.Docker镜像通过虚拟化保证相同的运行环 ...

  6. Net Core 网关 Ocelot 简单案例

    1.什么是Ocelot Ocelot是一个用.NET Core实现并且开源的API网关,它功能强大,包括了:路由.请求聚合.服务发现.认证.鉴权.限流熔断.并内置了负载均衡器与Service Fabr ...

  7. z order curve

    https://www.cnblogs.com/tgzhu/p/8286616.html

  8. Vulnhub:Player-v1.1靶机

    kali:192.168.111.111 靶机:192.168.111.178 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...

  9. 关于浏览器缓存造成的bug解决方法(页面跳转缓存,刷新生效)

    1.在执行操作时带上一个随机数/时间戳,表示每一次的都是独一无二的

  10. python判断文件后缀名

    endswith()方法 利用文件名或路径名对文件后缀进行判断,例如对文件名后缀是否为.jpg的文件进行判断. path = "file.jpg" bool = path.ends ...