vue3基础

vue3的优势

作为我们应该注重了解源码和新的特性

新的特性我们挨着来了解

首先是创建工程

第一种方式也是命令行 直接vue create 文件名创建vue3

第二种可以vite创建

也是直接命令行创建和第一种差不多

首先是组合式CompositionApi

vue3中新的写法就是全部写在setup函数中很方便

代码示例如下:

setup(){

let name =ref("张三")

let age = ref(18)

let job = ref({

type:"前端工程师",

salary:"30k"

})

function sayHello(){

alert(`我叫{name},今年{age}岁`)

}

function changInfo(){

name.value='李四'

age.value = 20

job.value.type="UI工程师"

job.value.salary="40k"

console.log(name,age)

}

return{

name,

age,

job,

sayHello,

changInfo

}

}

将一切都定义在里面,然后最后return出去,外面直接用,如果要使用响应式的一定要用ref把数据包裹

调用时候是xxx.value

相关推荐
Asort7 分钟前
React函数组件深度解析:从基础到最佳实践
前端·javascript·react.js
golang学习记7 分钟前
VS Code + Chrome DevTools MCP 实战:用 AI 助手自动分析网页性能
前端
用户4099322502129 分钟前
Vue 3中reactive函数如何通过Proxy实现响应式?使用时要避开哪些误区?
前端·ai编程·trae
Qinana15 分钟前
🌐 从 HTML/CSS/JS 到页面:浏览器渲染全流程详解
前端·程序员·前端框架
BBB努力学习程序设计17 分钟前
网页布局必备技能:手把手教你实现优雅的纵向导航
前端·html
T___T19 分钟前
从代码到页面:HTML/CSS/JS 渲染全解析
前端·面试
Ebin20 分钟前
Shopify 前端实战系列 · S02.5 - 开发者必看!一文搞懂 Shopify App Extension
前端
Justineo22 分钟前
TemPad Dev:设计与实现
前端·javascript·css
HuangYongbiao23 分钟前
Rspack 插件架构原理:从 Tapable 到 Rust Hook
前端·架构