一、简介
现在企业当中使用的基本都是vue2.x的版本,vue3.0是尤雨溪官方团队于2020年09月18日正式发布的。
vue3.0版本与其他版本完全不同,它最大限度的减少了开发人员配置工具的次数,另外增添了许多丰富的内置功能,还附带了一个完整的GUI用于创建和管理项目。
二、语法特性
2.1初步入门
2.1.1 vue-cli方式安装
必须保证你的vue-cli的版本在4.5以上,你可以用vue-V测试一下
如果不符合请重新安装
npm install -g @vue/cli
然后执行下面的三个步骤创建vue脚手架项目:
- vue create 项目
- cd 项目
- npm run serve
2.1.1 使用vite方式创建
操作步骤如下:
- npm init vite-app 项目名称
- cd 项目名
- npm install (安装所有依赖)
- npm run dev (启动项目)
三、常用组合式API(Composition API)
3.1 setup
- 以前vue2中定义数据放在data中,定义方法放在methods中,现在vue3全部定义在setup中
- setup中返回一个对象,对象中的属性在页面直接使用
vue页面如下操作:
<template>
<div>
<div>
<p>{
{
name}}{
{
score}}</p>
<p>{
{
fn()}}</p>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
setup() {
let name = "tom";
let score = 80;
function setData() {
return `${
name}你好,你考了${
score}分`;
}
return {
name: name,
score: score,
fn: setData
};
}
};
</script>
但是注意vue3中vue2的语法也是正常可以使用的
<template>
<div>
<div>
<p>{
{
name}}{
{
score}}</p>
<p>{
{
fn()}}</p>
<p>{
{
msg}}</p>
<button @click="show">点击显示</button>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "hello"
};
},
methods: {
show() {
console.log(this.msg);
}
},
setup() {
let name = "tom";
let score = 80;
function setData() {
return `${
name}你好,你考了${
score}分`;
}
return {
name: name,
score: score,
fn: setData
};
}
};
</script>
注意
虽然能实现,但是不建议混用,会出各种意向不到的问题
3.2 ref函数
ref函数是把普通的数据进行包裹,形成一个响应式的引用对象
- 不包裹ref函数调用
<template>
<div>
<div>
<p>{
{
name}}{
{
score}}</p>
<button @click="fn">点击显示</button>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
setup() {
let name = "tom";
let score = 80;
function setData() {
name = "jim";
score = 100;
console.log(name); //jim
console.log(score); //100
}
return {
name: name,
score: score,
fn: setData
};
}
};
</script>
- ref函数包裹以后
<template>
<div>
<div>
<p>{
{
name}}{
{
score}}</p>
<button @click="fn">点击显示</button>
</div>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
name: "HelloWorld",
setup() {
let name = ref("tom");
let score = ref(80);
function setData() {
name.value = "jim";
score.value = 100;
console.log(name); //RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 'tom', _value: 'tom'}
console.log(score); //RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 80, _value: 80}
}
return {
name: name,
score: score,
fn: setData
};
}
};
</script>
- 如果是处理对象等复杂类型
<template>
<div>
<div>
<p>{
{
name}}{
{
score}}</p>
<p>{
{
info.sex}}</p>
<p>{
{
info.address}}</p>
<button @click="fn">点击显示</button>
</div>
</div>
</template>
<script>
import {
ref } from "vue";
export default {
name: "HelloWorld",
setup() {
let name = ref("tom");
let score = ref(80);
let info = ref({
sex: "男",
address: "保定"
});
function setData()