vue3 day01
分类:vue
一. 创建vue
第一种方式
- 使用vue-cli
#查看脚手架版本,确保vue/cli的版本在4.5.0以上
vue --version
vue -V
#安装或升级你的@vue/cli
npm install -g @vue.cli
##创建项目
vue create vue_test
## 启动
cd vue_test
npm run serve
第二种方式
- 使用vite
npm init vite-app vue3_test_vite
#安装依赖
yarn
# 启动
# 这里后面填,并没有启动成功
官方文档:https://vitejs.cn/guide/why.html#why-not-bundle-with-esbuild
- 什么是vite
- 新一代前端构建工具
- 优势如下
- 开发环境中,无需打包操作,可快速的冷启动
- 轻量快速的热重载(HMR)
- 真正的按需编译,不在等待整个应用程序编译完成
- 传统构建
- vite构建
分析工程
- main.js
//导入的不是vue的构造函数,是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
/*
createApp(App).mount('#app')
替换了这句
const vm = new Vue({
render:h=>h(App)
});
vm.$mount('#app')
*/
这个就是createApp
的返回,类似v2的vm,但是比vm更轻量
mount
就是挂载组件,只有挂载了App
,这个组件才会显示,同时也可以调用unmount
去卸载组件
vue3的初始化,已经不兼容Vue2的 new Vue({})的写法了,import的直接是undefined
- Vue组件的区别
- 可以没有根标签
开发者工具
目前vue的插件是支持vue2/vue3的,无需新下载版本
常见Composition API
composition api :组合式api
文档地址: https://v3.cn.vuejs.org/guide/composition-api-introduction.html
setup
- 理解:
- vue3.0中一个新的配置项,值为一个函数
setup
是所有Composition api(组合api) 表演的舞台- 组建中所用到的东西,数据,方法等等,均要配置在setup中
- setup函数的两种返回值
- 若返回一个对象,则对象的属性,方法,在模板中均可以直接使用(重点关注)
- 若返回一个渲染函数,则可以自定义渲染内容(了解)
- 注意点
- vue2.x配置(data,methods,computed...)中
可以访问到
setup中的属性,方法 - 但是setup中
不能访问到
vue2.x配置(data,methods,computed) - 如果有重名,setup优先
- 尽量不要与vue2.x配置混用
- setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性
- vue2.x配置(data,methods,computed...)中
- hello
setup的第一种用法
<template>
<h1>我是setup测试</h1>
<h1>个人信息</h1>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<button @click="sayHello">sayHello</button>
</template>
<script>
export default {
name: 'App',
//这里会丢失响应式,只是做一个演示
setup(){
let name = "花花";
let age = 18;
function sayHello() {
alert(`我的名字是${name},我今年${age}岁`)
}
return {
name,age,sayHello
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
setup的第二种用法
<template>
<h1>我是setup测试</h1>
<h1>个人信息</h1>
<h2>{{ name }}</h2>
<h2>{{ age }}</h2>
<button @click="sayHello">sayHello</button>
</template>
<script>
import {h} from "vue";
export default {
name: 'App',
setup() {
return ()=> h("h1","花花")
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
ref
- 修改sayHelllo
function sayHello() {
name = "花花2";
age = 20;
console.log(name,age)
// alert(`我的名字是${name},我今年${age}岁`)
}
实际上是修改了,但是因为不是响应式数据,视图不刷新
- 使用ref解决这个问题
setup(){
let name = ref("花花");
let age = ref(18);
function sayHello() {
console.log(name,age)
}
ref包裹的 实际上返回了一个RefImpl
引用实现类,官网原话是响应式引用
/*
* 可以通过这个来修改变量
*/
function sayHello() {
name.value = "花花2";
age.value = 20;
}
完整代码
<template>
<h1>我是setup测试</h1>
<h1>个人信息</h1>
<h2>{{ name }}</h2>
<h2>{{ age }}</h2>
<button @click="sayHello">sayHello</button>
</template>
<script>
import {ref} from "vue";
export default {
name: 'App',
setup(){
let name = ref("花花");
let age = ref(18);
function sayHello() {
name.value = "花花2";
age.value = 20;
console.log(name,age)
}
return {
name,age,sayHello
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- ref对
对象
的处理
let job = ref({
jobs:"前端开发工程师",
salary:'3k'
})
function sayHello() {
console.log(job.value)
}
- 发现ref对对象的处理时不一样的,他是proxy
总结
- 作用: 定义一个响应式数据
- 语法
const xxx = ref(initValue)
- 创建一个包含响应式数据的
引用对象(refrence对象,简称reg对象)
- js操作数据
xxx.value
- 模板中读取数据: 不需要.value,直接
<div>{{xxx}}</div>
- 创建一个包含响应式数据的
- 备注:
- 接收的数据可以是
基本类型
,也可以是对象
- 基本数据类型: 响应式依然是靠
Object.defineProperty()
的get
和set
完成的 - 对象类型: 内部求助了vue3.0中的新函数,
reactive
- 接收的数据可以是
- 最终代码
<template>
<h1>我是setup测试</h1>
<h1>个人信息</h1>
<h2>{{ name }}</h2>
<h2>{{ age }}</h2>
<button @click="sayHello">sayHello</button>
<h2>职业:{{job.jobs}}</h2>
<h2>薪水:{{job.salary}}</h2>
</template>
<script>
import {ref} from "vue";
export default {
name: 'App',
setup(){
let name = ref("花花");
let age = ref(18);
let job = ref({
jobs:"前端开发工程师",
salary:'3k'
})
function sayHello() {
name.value = "花花2";
age.value = 20;
job.value.salary = '6k'
job.value.jobs = "全栈开发工程师"
console.log(name,age)
console.log(job.value)
}
return {
name,age,sayHello,job
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>