Vue3学习体验(一)

搭建工程

使用vue-cli脚手架创建vue3工程

javascript 复制代码
vue create vue3-app-vue-cli

Vue-cli官网:https://cli.vuejs.org/zh/guide/installation.html

使用vite搭建vue3工程

npm init表示临时的下载vite应用来创建vue3工程,工程名称为vue3-app-vite

javascript 复制代码
npm init vite-app vue3-app-vite

注意:以上方式不是全局安装。

两种方式搭建工程的区别

  • vue-cli搭建的工程
    • import引入时,可以省略文件后缀名,如import App from './App'
    • 页面文件index.html放在public目录中
  • vite搭建的工程
    • import引入时,除了js文件不需要加.js后缀外其他文件引入时都要加后缀名,如:import App from './App.vue'
    • 页面文件index.html不再放入public目录中,而是放在根目录下,其他的静态资源还是放在public目录下(原封不到生成到打包结果的那些)

二者打包后生成的dist目录结构也不一样。

Vue3变化

总结一些细节变化,不涉及底层原理。

没有 Vue 构造函数了

Vue2 中

javascript 复制代码
import App from "./App.vue";
javascript 复制代码
const app = new Vue(options)
Vue.use()
app.$mount("#app")

这种构造函数方式创建 Vue 更像是一个组件实例,里面有很多属性等,有很多是 $_开头的属性。

采用具名导出

Vue3中

javascript 复制代码
import { createApp } from "vue";

createApp 表示创建一个应用

这种更新好像叫做 breaking 截断式更新,意思是不再兼容老版。

javascript 复制代码
const app = createApp(App);
app.mount("#app");

这种函数式的创建 Vue,得到的是一个非常纯净的实例对象、一个 Vue 应用对象,里面只提供了必须的、会用到、要用到的方法,那些不太会用到的方法被去掉了。

使用插件方式不同

Vue2 中,Vue.use(插件),使用的是 Vue 构造函数上的静态方法。

Vue3 中,app.use(插件),使用的是const app = createApp(App);创建的实例对象的方法。

this不同

Vue2 中 this 指向 Vue 构造函数的实例对象,而 Vue3 中 this 指向的是一个 proxy 代理对象。

但是,

在 Vue3 中我们一般会使用 setup 函数,而在setup函数中,this 指向 undefined

javascript 复制代码
<template>
  <p></p>
</template>

<script>
export default {
  setup() {
    // console.log("所有生命周期钩子函数之前调用");
    // console.log(this); // this -> undefined

    return {};
  },
};
</script>

选项式与组合式

Vue2 是选项式 Api

Vue3 是组合式 Api

Vue3 中的 setup 函数

javascript 复制代码
<template>
  <h1>count:{{ count }}</h1>
  <p>
    <button @click="decrease">decrease</button>
    <button @click="increase">increase</button>
  </p>
</template>

<script>
export default {
  setup() {
    // console.log("所有生命周期钩子函数之前调用");
    // console.log(this); // this -> undefined

	let count = 0;
	const increase = () => {
		count++;
	}
	const decrease = () => {
        count--;
    };

    // setup中,count是一个对象
    // 实例代理中,count是一个count.value

    return {
      count,
      increase
    };
  },
};
</script>

setup 函数中 return 返回的对象中的属性会被附着到组件实例中。

此时,count 值变化不会触发视图更新,因为 count 不是一个响应式数据。

Vue3 中的数据响应式

如何将上述的 count 变量转成响应式?

Vue3 中提供了一些响应式 Api 来对数据做响应式处理。

修改上面的代码,如下:

javascript 复制代码
<template>
  <h1>count:{{ countRef }}</h1>
  <p>
    <button @click="decrease">decrease</button>
    <button @click="increase">increase</button>
  </p>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    // console.log("所有生命周期钩子函数之前调用");
    // console.log(this); // this -> undefined

    // setup中,count是一个对象
    // 实例代理中,count是一个count.value

    let countRef = ref(0);
    const increase = () => {
      countRef.value++;
    };
    const decrease = () => {
      countRef.value--;
    };
    return {
      countRef,
      increase,
      decrease,
    };
  },
};
</script>

setup 函数环境中,count 是一个对象

模板实例环境中、实例代理中,count 是一个 count.value

调整以上代码,使用函数封装 increase、decrease 操作逻辑

javascript 复制代码
<template>
  <h1>count:{{ countRef }}</h1>
  <p>
    <button @click="decrease">decrease</button>
    <button @click="increase">increase</button>
  </p>
</template>

<script>
import { ref } from "vue";

function useCount() {
  let countRef = ref(0);
  const increase = () => {
    countRef.value++;
  };
  const decrease = () => {
    countRef.value--;
  };
  return {
    countRef,
    increase,
    decrease,
  };
}

export default {
  setup() {
    // console.log("所有生命周期钩子函数之前调用");
    // console.log(this); // this -> undefined

    // setup中,count是一个对象
    // 实例代理中,count是一个count.value

    //1. 新增

    //2. 修改

    //3. 删除
    return {
      ...useCount(),
    };
  },
};
</script>
相关推荐
云上艺旅15 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
ElasticPDF-新国产PDF编辑器15 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
你觉得20515 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西16 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ17 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007517 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
Billy Qin17 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌17 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
吴梓穆17 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
头顶秃成一缕光17 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc