做素材网站服务器,网站手机版方案,仿牌网站安全,网站域名注册商查询#x1f31c;本篇文章目录\textcolor{green}{本篇文章目录}本篇文章目录 #x1f31b; #x1f435; 新构建工具Vite\textcolor{blue}{新构建工具Vite}新构建工具Vite #x1f435; CompositionAPI火爆来袭\textcolor{blue}{Composition API火爆来袭}CompositionAPI火爆来… 本篇文章目录\textcolor{green}{本篇文章目录}本篇文章目录 新构建工具Vite\textcolor{blue}{新构建工具Vite}新构建工具Vite CompositionAPI火爆来袭\textcolor{blue}{Composition API火爆来袭}CompositionAPI火爆来袭 CompositionAPI的基本使用\textcolor{blue}{Composition API的基本使用}CompositionAPI的基本使用 计算属性的使用\textcolor{blue}{计算属性的使用}计算属性的使用 事件处理\textcolor{blue}{事件处理}事件处理 侦听器\textcolor{blue}{侦听器}侦听器 引用对象单个原始值响应化\textcolor{blue}{引用对象单个原始值响应化}引用对象单个原始值响应化 体验逻辑组合\textcolor{blue}{体验逻辑组合}体验逻辑组合 vite
如今Vue3出现后搭建Vue项目的方式有三种除了可以通过 vue-cli 和 webpack 搭建脚手架外 官方还提供了一种新的脚手架搭建工具 vite前面两种方式我们并不陌生我们重点来看一下Vite Vite 是 Vue 作者开发的一款意图取代 webpack 的工具实现原理是利用 ES6 的 import 会发送请求去加载文件的特性拦截这些请求做一些预编译省去 webpack 冗长的打包时间
使用vite快速创建一款Vue3项目 使用vite创建vue3的步骤 npm install -g create-vite-app create-vite-app vue3-demo cd vue3-demo npm install 创建目录如下 还是老样子我们看一下项目中的package.json 确实我们的项目中的vue版本是3并且我们的运行以及打包都是依赖Vite现在我们npm run dev看一下 就一个字 贼快 下面我们看一下main.js文件 我们就发现了陌生而又熟悉的地方 Vue3是通过createApp创建vue实例的而不是new Vue2中的所有内容都是挂载到new出来的vue构造函数跟实例上面的 现在vue3都是挂再到app上面 关于Vite的相关内容我们暂时就介绍这么多更多的内容大家可以在网上找到更多的资料
Composition API火爆来袭
Composition API字面意思是组合API它是为了实现基于函数的逻辑复用机制而产生的。是Vue的一大亮点和Vue2的区别我们下面揭晓
下面两张图让您直白的看出差距 在vue2中使用的统称为选项apioptionApi 比如我们需要定义数据需要我们在data选项去定义如果我们定义方法我们就需要在methods的选项下
Vue2所运用的option api的缺点例如我们抽离一个很简单的组件 组建功能就是一个累加的功能而vue抽离出去后的代码是分散的 我们需要在data中去定义一个num 然后我们需要在methods中去创建一个add方法功能代码比较分散这仅仅是一个小功能组件如果是更复杂的逻辑呢 Vue3中运用的是compostion Api运用的是一个功能就是一块代码阅读性可维护性会更高些
Composition API的基本使用
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript src../dist/vue.global.js/script
/headbodydiv idapph1Composition API/h1divcount: {{ state.count }}/div/divscriptconst {createApp,reactive} Vue;// 声明组件const App {// setup是一个新的组件选项它是组件内使用Composition API的入口// 调用时刻是初始化属性确定后beforeCreate之前setup() {// 响应化接收一个对象返回一个响应式的代理对象const state reactive({ count: 0 })// 返回对象将和渲染函数上下文合并return { state }}}createApp(App).mount(#app)/script
/body/html计算属性的使用
divdoubleCount: {{doubleCount}}/divconst { computed } Vue;
const App {setup () {const state reactive({count: 0,// computed()返回一个不可变的响应式引用对象// 它封装了getter的返回值doubleCount: computed(() state.count * 2)})}
}事件处理
div clickaddcount: {{ state.count }}/divconst App {setup () {// setup中声明一个add函数function add () {state.count}// 传入渲染函数上下文return { state, add }}
}侦听器
const { watch } Vue;
const App {setup () {// state.count变化cb会执行// 常用方式还有watch(()state.count, cb)watch(() {console.log(count变了: state.count);})}
}引用对象单个原始值响应化
divcounter: {{ counter }}/divconst { ref } Vue;
const App {setup () {// 返回响应式的Ref对象const counter ref(1)setTimeout(() {// 要修改对象的valuecounter.value}, 1000);// 添加counterreturn { state, add, counter }}
}体验逻辑组合 const { createApp, reactive, onMounted, onUnmounted, toRefs } Vue;
// 鼠标位置侦听
function useMouse () {// 数据响应化const state reactive({ x: 0, y: 0 })const update e {state.x e.pageXstate.y e.pageY}onMounted(() {window.addEventListener(mousemove, update)})onUnmounted(() {window.removeEventListener(mousemove, update)})// 转换所有key为响应式数据return toRefs(state)
}
// 事件监测
function useTime () {const state reactive({ time: new Date() })onMounted(() {setInterval(() {state.time new Date()}, 1000)})return toRefs(state)
}
// 逻辑组合
const MyComp {template:
divx: {{ x }} y: {{ y }}/div
ptime: {{time}}/p
,setup () {// 使用鼠标逻辑const { x, y } useMouse()// 使用时间逻辑const { time } useTime()// 返回使用return { x, y, time }}
}
createApp().mount(MyComp, #app)想了解更多关注我持续推送 ✨原创不易还希望各位大佬支持一下\textcolor{blue}{原创不易还希望各位大佬支持一下}原创不易还希望各位大佬支持一下 点赞你的认可是我创作的动力\textcolor{green}{点赞你的认可是我创作的动力}点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向\textcolor{green}{收藏你的青睐是我努力的方向}收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富\textcolor{green}{评论你的意见是我进步的财富}评论你的意见是我进步的财富
