Vue3+vite,vue3基本使用文档

文章目录

    • 1. vite
    • 2. 创建vue3.x项目
      • 2.1 使用vite创建的项目
      • 2.2 使用vue-cli创建vue3.x项目
    • 3. vue3.x 基本使用
      • 3.1 响应式基础
        • 3.1.1 reactive() 方法
        • 3.1.2 ref() 方法
      • 3.2 script setup
      • 3.3 响应性语法糖
    • 3. vue3和vue2不同之处
      • 3.1 启动方式不同
      • 3.2 全局挂载方式不同
      • 3.3 根节点有所改变
      • 3.4 数据 data
      • 3.5 组件之间传参不同
    • 4. 总结、注意事项

1. vite

vue官方提供了两种快速创建工程化项目的方式,一种是基于 vue-cli 创建的SPA项目,另一种就是基于 vite 创建的SPA项目。两者的区别如下:

说明 vite vue-cli
支持的vue版本 仅支持vue3.x 支持vue3.x、2.x
是否基于webpack
运行速度 较慢
功能完整度 小而巧(正在慢慢完善) 大而全(基本完善)
企业及项目完整情况 向主流发展 目前主流

vite作为新新一代的构建工具,他的优势有以下几点

  1. 开发环境中,无需打包快速冷启动
  2. 轻量级热重载,按需编译等

2. 创建vue3.x项目

2.1 使用vite创建的项目

兼容性注意:
Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

使用NPM创建:

1| $ npm create vite@latest
或
1|$ npm init vite-app 项目名称

2|cd 项目名称

3|npm install

4|npm run dev

使用yarn:

1|$ yarn create vite

2|cd 项目名称

3|yarn install

4|yarn dev

然后按照提示操作就行。

也可以通过附加的命令来直接定义项目名称和钥匙用的模板,比如我们创建一个vite + vue3.x的项目,我们可以这样写

# npm 6.x
npm create vite@latest 项目名称 --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest 项目名称 -- --template vue

# yarn
yarn create vite 项目名称 --template vue

2.2 使用vue-cli创建vue3.x项目

  1. 安装最新vue-cli

最新的vue-cli名称改成了 @vue/cli。如果你安装2.x以下版本请先卸载Vue Cli 4.x版本,Node.js版本要求v10以上版本

可以使用以下命令安装:

npm install -g @vue/cli
# 或
yarn global add @vue/cli

查看版本:

vue --version
# 或
vue -V

升级全局Vue Cli版本:

npm update -g @vue/cli
# 或
yarn global upgrade --latest @vue/cli
  1. 创建项目:

执行命令

1| vue create hello-world

执行完上面的命令会出现以下选择配置项

Please pick a preset:
  Default ([Vue 2] babel, eslint)									// 版本2
> Default (Vue 3 Preview) ([Vue 3] babel, eslint) 					// 版本3
  Manually select features											// 手动选择

选择第三项后手动配置:

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

上下箭头移动,按空格键选中,按回车进入下一步


选择vue版本:选择3.x(Preview)

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter      
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  2.x
> 3.x (Preview)

后面操作根据自己需求进行配置

创建好以后

2| cd 项目名称
3| npm install
4| npm run serve

3. vue3.x 基本使用

3.1 响应式基础

响应式对象其实是 JavaScript Proxy (Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等),其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。

要在组件模板中使用响应式状态,需要在 setup() 函数中定义并返回。

3.1.1 reactive() 方法

reactive() API 有两条限制:

  1. 仅对对象类型有效(对象、数组和 Map、Set 这样的集合类型),而对 string、number 和 boolean 这样的 原始类型 无效。
  2. 因为 Vue 的响应式系统是通过属性访问进行追踪的,因此我们必须始终保持对该响应式对象的相同引用。这意味着我们不可以随意地“替换”一个响应式对象,因为这将导致对初始引用的响应性连接丢失:
let state = reactive({ count: 0 })
state = reactive({ count: 1 })
这种写法不具响应式

我们可以使用 reactive() 函数创建一个响应式对象或数组:

import { reactive } from 'vue'

export default {
  // `setup` 是专门用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 })

    // 一定要暴露出去 state,不然模板娶不到值
    return {
      state
    }
  }
}

我们也可以在同一个作用域下定义改变响应式数据的方法。同样,我们需要吧方法也要暴露出去

import { reactive } from 'vue'

export default {
  setup() {
    const state = num({ count: 0 })
    function count() {
      state.num++
    }
    return {
      state,
      count
    }
  }
}

暴露的方法就是事件监听器,模版中使用该方法:

<button @click="count">
  {{ state.count }}
</button>
3.1.2 ref() 方法

Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式 ref,他并没有限制

import { ref } from 'vue'

export default {
  setup() {
    const num = ref(0)
    // ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象:
    console.log(num) // { value: 0 }
	console.log(num.value) // 0
	
	function count() {
	  num.value++
	  console.log(num.value) // 1
	}


	// 一个包含对象类型值的 ref 可以响应式地替换整个对象
	const objectRef = ref({ count: 0 })
	// 这是响应式的替换
	objectRef.value = { count: 1 }

	// ref 被传递给函数或是从一般对象上被解构时,不会丢失响应性:
	const obj = {
	  foo: ref(1),
	  bar: ref(2)
	}
	// 该函数接收一个 ref
	// 需要通过 .value 取值
	// 但它会保持响应性
	callSomeFunction(obj.foo)
	// 仍然是响应式的
	const { foo, bar } = obj

	return {
		num,
		obj,
		count
	}
  }
}

在模板中使用num

<template>
  <button @click="count">
    {{ num }} 
  button>
template>

3.2 script setup

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是,我们可以通过使用构建工具来简化该操作。当使用单文件组件(SFC)时,我们可以使用

<script setup>
import { reactive } from 'vue'

const state = reactive({ num: 0 })

function num() {
  state.num++
}
</script>

<template>
  <button @click="num">
    {{ state.num }}
  </button>
</template>

3.3 响应性语法糖

通常我们用了ref()就必须得用.value来获取ref的值,非常繁琐,然而,通过编译时转换,我们可以让编译器帮我们省去使用 .value 的麻烦。Vue 提供了一种编译时转换,使得我们可以像这样书写之前的“计数器”示例:

<script setup>
let count = $ref(0)

function num() {
  // 不需要 .value
  count++
}
</script>

<template>
  <button @click="num">{{ count }}</button>
</template>

3. vue3和vue2不同之处

3.1 启动方式不同

vue3 启动方式

import {createApp} from 'vue'
createApp(App).use(router).use(store).mount("#app")

vue2 启动方式

import Vue from 'vue'
new Vue({
   store,
   router,
  render:h=>h(App)
}).$mount("#app")

3.2 全局挂载方式不同

vue3 挂载

app.config.globalProperties.$alert = function(message){alert(message)}

vue2 挂载

Vue.prototype.$alert = function(message){alert(message)}

3.3 根节点有所改变

vue3 可以有多个根节点

<template>
  <div>hello worlddiv>
  <div>hello world111div>
  <div>hello world222div>
  <div>hello world333div>
template>

vue2 只允许有一个根节点

<template>
  	<div>
		<div>hello worlddiv>
		<div>hello world111div>
		<div>hello world222div>
		<div>hello world333div>
	div>
template>

3.4 数据 data

vue3 需要用到setup()方法

  1. vue引入reactive或者ref
  2. 使用reactive()方法来声名对象数组等类型的数据为响应性数据,ref()方法来声明String,Number等类型的数据为响应性数据
  3. 用setup()方法来返回我们的响应性数据,从而我们的template可以获取这些响应性数据
import { reactive,ref } from 'vue'

export default {
  setup () {
    let state = reactive({
      name: '',
      password: ''
    })

	let num = ref(12)
    
    return { state,num }
  }
}

vue2 直接把数据放到了data属性中

import { reactive } from 'vue'

export default {
  data () {
    return {
      name: '',
      password: '',
      num: 12
    }
  }
}

3.5 组件之间传参不同

vue3 传参

  1. 父组件传子组件

在父组件的子组件标签中定义一个属性,在子组件中用defineProps接收父组件传来的值,

父组件

<template>
  <son msg="父组件传的msg">son>
template>

<script setup>
import {ref,onMounted} from  'vue'
import son from '@/components/son.vue'
script>

子组件

<template>
	<p>父组件传过来的:{{msg}}p>
template>

<script setup>
import {ref} from 'vue'
defineProps({
  msg: String,
})
script>

defineProps接受数据类型和vue2中props一样,可以定义接收类型,定义初始值,加校验、

例如:

defineProps({
  // 基础类型检查
  // (给出 `null` 和 `undefined` 值则会跳过任何类型检查)
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传,且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
})
  1. 子组件传父组件

父组件

<template>
  <section class="parent">
    <Child  @count="handleIncrease">Child>
  section>
template>

<script setup>
  import Child from './child.vue';
  import { ref } from 'vue';
  const nums = ref(0);
  const handleIncrease = () => {
    nums.value++;
  };
script>

子组件

<template>
  <section class="box" @click="handelClick">{{ num }}section>
template>

<script setup>
  const emits = defineEmits();
  const handelClick = () => {
    emits('count');
  };
script>

vue2 子父传参就不多介绍了。相信大家都会

4. 总结、注意事项

  1. setup 函数时,它将接受两个参数:(props、context(包含attrs、slots、emit))
  2. setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数
  3. 执行 setup 时,组件实例尚未被创建,this不指向vue实例,vue将setup函数中的this指向改成undefined。
  4. 与模板一起使用:需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

注意事项:

  1. setup中不能使用this,setup中的this是undefined。
  2. setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。

如果需要解构 prop,通过使用 setup 函数中的toRefs 来完成

本章内容到此结束,希望能该你带来帮助

你可能感兴趣的:(vue,vue.js,vite,vue3)