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>
相关推荐
H5开发新纪元12 分钟前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
DKPT2 小时前
正则表达式
java·数据库·笔记·学习·正则表达式
icefiresong242 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js
chuxinweihui2 小时前
数据结构——二叉树,堆
c语言·开发语言·数据结构·学习·算法·链表
zhuyixiangyyds2 小时前
day36图像处理OpenCV
图像处理·笔记·学习
Mr__Miss2 小时前
JVM学习笔记
jvm·笔记·学习
周而复始 否极泰来2 小时前
深入浅出学会函数(上)
c语言·学习
ayas123192 小时前
数模学习:一,层次分析法
学习
yuhouxiyang2 小时前
学习海康VisionMaster之顶点检测
学习·计算机视觉
我的golang之路果然有问题3 小时前
给git配置SSH(github,gitee)
经验分享·笔记·git·学习·gitee·ssh·github