vue3.0入门到精通
附B站讲解视频
vue3+typescript入门到精通
vue3.0 安装
前安装过vue的2.0版本,你需要把2.0相关的删除
npm uni -g vue-cli
安装vue/cli脚架
npm i -g @vue/cli
检查版本号,目前安装vuecli 4.5.4
vue -V
创建:在命令窗口输入指令
选择default vue 3
vue create 项目名称
vue composition API
vue3.0 侧重于解决代码组织与逻辑复用问题
目前,我们使用的是“options”API 构建组件。 为了将逻辑添加到Vue组件中,我们填充(options)属性,如data、methods、computed等。 这种方法最大的缺点是,它本身不是一个工作的JavaScript代码。 您需要确切地知道模板中可以访问哪些属性以及this关键字的行为。在底层,Vue编译器需要将此属性转换为工作代码。正因为如此,我们无法从自动建议或类型检查中获益。
Composition API希望将通过当前组件属性、可用的机制公开为JavaScript函数来解决这个问题。 Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api,允许灵活地组合组件逻辑”。 使用Composition API编写的代码更易读,并且场景不复杂,这使得阅读和学习变得更容易。
让我们看到一个非常简单的组件示例,它使用新的组件Composition API来理解它是如何工作的。
export default {
name: 'App',
data() {
return {
msg:'王大合',
age:18
}
},
methods:{
add() {
this.age += 1
}
}
}
setup
vue3.0将组件的逻辑都写在了函数内部,setup()会取代vue2.x的data()函数,返回一个对象,暴露给模板,而且只在初始化的时候调用一次,因为值可以被跟踪,所以我们通过vue3来改变编程习惯
首先引入ref
使用数据需要return
import {ref} from 'vue'
setup() {
const msg = ref('王大合')
const age = ref(18)
function add() {
age.value +=1
}
return {msg,age,add}
}
computed
import {computed, ref} from 'vue'
export default {
name: 'App',
setup() {
const msg = ref('王大合')
const age = ref(18)
const double = computed(() =>{
return age.value * 2
})
function add() {
age.value += 1
}
return {msg,age,add,double}
}
}
reactive
在 setup 函数里面, 我们适应了 Vue3.0 的第一个新接口 reactive 它主要是处理你的对象让它经过 Proxy 的加工变为一个响应式的对象,
toRefs
用于将响应式对象变成普通对象
import {computed, reactive,toRefs} from 'vue'
export default {
name: 'App',
setup() {
const state = reactive({
msg:'王大合',
age:18,
double : computed(() =>{
return state.age * 2
})
})
function add() {
state.age += 1
}
return {...toRefs(state),add}
}
}
props 和 context
在 Vue2.0 中我们可以使用 props 属性值完成父子通信,在这里我们需要定义 props 属性去定义接受值的类型,然后我们可以利用 setup 的第一个参数获取 props 使用。
export default {
name: 'App',
components:{
Content
},
setup() {
const state = reactive({
msg:'王大合',
age:18,
double : computed(() =>{
return state.age * 2
})
})
function add() {
state.age += 1
}
return {...toRefs(state),add}
}
}
我们在 App.vue 里面就可以使用该头部组件,有了上面的 props 我们可以根据传进来的值,让这个头部组件呈现不同的状态。
这里我新建一个新的组件content,在app.vue中引入
import {ref} from 'vue'
export default {
name:'content',
props:{
msg:String
},
setup(props) {
const data = ref(props.msg)
return {data}
}
}
setup 函数的第二个参数是一个上下文对象,这个上下文对象中包含了一些有用的属性,这些属性在 Vue2.0 中需要通过 this 才能访问到,在 vue3.0 中,访问他们变成以下形式:
setup(props, ctx) {
console.log(ctx) // 在 setup() 函数中无法访问到 this
console.log(this) // undefined
}
具体能访问到以下有用的属性:
- slot
- attrs
- emit
父组件
import {computed, reactive,toRefs} from 'vue'
import Content from './components/content.vue'
export default {
name: 'App',
components:{
Content
},
setup() {
const state = reactive({
msg:'王大合',
age:18,
double : computed(() =>{
return state.age * 2
})
})
function showName(params) {
alert(params)
}
function add() {
state.age += 1
}
return {...toRefs(state),add,showName}
}
}
子组件
import {ref} from 'vue'
export default {
name:'content',
props:{
msg:String
},
setup(props,context) {
const data = ref(props.msg)
function changeName() {
context.emit('change','Hello,王大合!')
}
return {data,changeName}
}
}
watch
监听ref
不指定数据源
const a = ref(18)
watch(()=>{
console.log(a.value)
})
指定数据源
const a = ref(18)
watch(a,()=> {
console.log(a.value)
})
监听reactive
const state = reactive({
msg:'王大合',
age:18,
double : computed(() =>{
return state.age * 2
})
})
不指定数据源
watch(()=>{
console.log(state.age)
})
指定数据源
watch(()=>state.age,()=>{
console.log(state.age)
})
回调函数参数以及watche clean,使用clean时候是处理重复性的watch监听事件
watch(() => state.age,(newVal,oldVal,clean)=> {
console.log(state.msg + "去年年纪:"+oldVal +"今年年纪:" + newVal)
clean(
()=>{
console.log('clean')
}
)
})
vue3.X+vite+typescript
放弃webpack,使用vite安装vue3.0
这个是尤大开发的新工具,目的是以后替代webpack,原理是利用浏览器现在已经支持es6的import了,遇到import会发送一个http请求去加载文件,vite拦截这些请求,做一些预编译,省去了webpack冗长打包的时间,提升开发体验
npm install -g create-vite-app
create-vite-app vue3-vite
cd vue3-vite
npm install
npm run dev
# 或者使用yarn
yarn add -g create-vite-app
yarn create vite-app
安装依赖
yarn
使用yarn启动项目
yarn dev
引入typescript
# 安装 typescript
yarn add typescript -D
初始化tsconfig.json
# 然后在控制台执行下面命令
npx tsc --init
将main.js修改为main.ts,同时将index.html里面的引用也修改为main.ts,
然后在script 里添加 lang="ts"
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
修改完之后,重启就可以访问项目了。虽然这样配置是可以了,但是打开main.ts会发现import App from App.vue会报错:Cannot find module './App.vue' or its corresponding type declarations.,这是因为现在ts还没有识别vue文件,需要进行下面的配置:
在项目根目录添加shim.d.ts文件
# powerShell终端,也可以手动创建
New-Item shim.d.ts
添加以下内容
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
安装vue-router
yarn add [email protected]
这样可以选择最新的vue-router 4.0.0的测试版本,这里更新到beta.13
配置vue-router
在项目src目录下面新建router目录,然后添加index.ts文件,在文件中添加以下内容
import {createRouter, createWebHashHistory} from 'vue-router'
// 在 Vue-router新版本中,需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
// 路由地址
routes: []
})
安装vuex
同上
yarn add [email protected]
目前只能选择最新测试版
在项目src目录下面新建store目录,并添加index.ts文件,文件中添加以下内容
import { createStore } from 'vuex'
interface State {
userName: string
}
export default createStore({
state:{
userName:'王大合'
}
});
main.ts中引入vuex和vue-router
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
import vuex from './store/index'
const app = createApp(App)
app.use(router)
app.use(vuex)
app.mount('#app')
上线小项目todoList
app.vue
export default {
name: 'App'
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
配置路由 router/index.ts
import {createRouter, createWebHashHistory} from 'vue-router'
// 在 Vue-router新版本中,需要使用createRouter来创建路由
export default createRouter({
// 指定路由的模式,此处使用的是hash模式
history: createWebHashHistory(),
// 路由地址
routes: [
{
path: '/',
// 必须添加.vue后缀
component: () => import('../views/todo-list.vue')
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
})
store的index.ts新建vuex
import { createStore } from 'vuex'
interface State {
userName: string
taskList: any[]
}
export default createStore({
state: {
userName: "王大合",
taskList: []
},
mutations:{
createTask (state:any, newTask:string) {
state.taskList.push(newTask)
},
deleteTask (state:any, index:number) {
state.taskList.splice(index, 1)
},
updateStatus (state:any, payload:any) {
const { index, status } = payload
state.taskList[index].isfinished = status
}
}
});
在src目录新建view文件夹,创建todoList和about
todoList
@keyup.enter="addTask"
class="input"
type="text"
v-model="inputValue"
placeholder="请输入" />
-
@click="updateStatus(index, !item.isfinished)"
class="content"
:class="item.isfinished ? 'active' : ''"
>{{item.lable}}
X - 暂无数据
import { ref, computed } from 'vue';
import { useStore } from "vuex";
export default {
setup() {
const store = useStore()
const taskList = computed(() => store.state.taskList);
const inputValue = ref('');
const addTask = () => {
store.commit('createTask', {
lable: inputValue.value,
isfinished: false
})
inputValue.value = ''
}
const updateStatus = (index, status) => {
store.commit('updateStatus', {
index,
status
})
}
const deleteTask = (index) => {
store.commit('deleteTask', index)
}
return {
inputValue,
taskList,
addTask,
updateStatus,
deleteTask
};
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
text-align: left;
}
.home {
max-width: 400px;
margin: 0 auto;
.input {
width: 100%;
height: 40px;
border-radius: 5px;
outline-style: none;
border: 2px solid #999;
padding: 5px 10px;
}
.ul {
margin-top: 10px;
}
.item {
height: 40px;
line-height: 40px;
padding-bottom: 5px;
border-bottom: 1px solid #dcdfe6;
color: #333333;
}
.item-none {
height: 40px;
line-height: 40px;
padding-bottom: 5px;
color: #333333;
text-align: center;
}
.content {
float: left;
height: 40px;
line-height: 40px;
cursor: pointer;
}
p.active {
text-decoration:line-through;
color: #999999;
}
.item-delete {
float: right;
width: 25px;
text-align: center;
cursor: pointer;
}
}
about
{{name}}
import { ref, watch } from 'vue';
export default {
name: 'about',
setup() {
const name = ref('王大合出品');
return {
name,
};
}
};