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>
相关推荐
鹏多多10 分钟前
基于Vue3+TS的自定义指令开发与业务场景应用
前端·javascript·vue.js
gnip9 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
王王碎冰冰16 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼17 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安17 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队17 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好17 小时前
pinia从定义到运用
前端·vue.js
代码小学僧18 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
东坡白菜18 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥1 天前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js