vue3.0从零开始到实战项目
vue3.0中文官网连接：https://v3.cn.vuejs.org/
一、安装node.js
1. 官方文档：https://nodejs.org/en/
安装版本必须大于12.0，建议直接安装最新稳定版本
2. 安装 node.js 的同时，一般会自动安装 npm 的，所以不用单独安装 npm 了（如有需要，也可以命令行安装：npm install -g）
3. 查看版本命令行：node -v 、 npm -v
二、全局安装vue脚手架
npm install @vue-cli -g
官方文档：https://cli.vuejs.org/zh/guide/
如果你安装的是旧版的vue-cli，需要提前卸载之后再重新安装 @vue-cli，卸载：
npm uninstall vue-cli -g
三、初始化项目
版本查看：vue -V
版本升级：npm update -g @vue-cli
创建项目：vue create projectname
注意：项目名称不能大写有字母
进入项目目录：cd projecname
运行项目：npm run serve
项目目录结构：
1. node_modules 依赖包，如果删除了，可以使用命令：npm install 安装
2. public 存放整个项目默认的 HTML 模板
3. src 源代码目录（入口文件：main.js）
4. .browserslistrc
5. .editorconfig 编辑器的默认配置
6. .eslintrc.js
7. .gitignore
8. babel.config.js 配置 babel
9. package.json
10. package-lock.json
11. README.md
以下是手动选择依赖初始化：
运行项目：
cd projectname
npm run serve
四、vue 3.0 + vite 篇
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。
通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
安装项目所需插件，比如：
安装项目生产依赖：npm vie vue-router@next vuex@next element-plus axios -D
安装项目开发依赖：npm i sass -S
element-plus文档：https://element-plus.gitee.io/#/zh-CN
安装路由 Router
# 查看 vue-router 版本
$ npm vie vue-router versions
# 指定版本下载
$ npm i -D vue-router@4.0.0-beta.11
以下是vue3.0的知识点：
Object.defineProperty => Proxy
重构了虚拟DOM
OptionApi => Composition API
setup 是什么？
setup 实际上是一个组件的入口，它运行在组件被实例化的时候，props 属性被定义之后，实际上等价于 vue2.x 版本的 beforeCreate 和 Created 这两个生命周期。
setup 接受两个参数，第一个是 props ，第二个是 context
setup(props, ctx) {
console.log(props, ctx)
}
let Child = { template: `<div>{{title}}</div>`,
setup(props, context) { console.log(props) } } let App = { template: `<div class="container"><Child title="test props"/></div>`, components: { Child } }
Vue.createApp().mount(App, '#app')
reactive
const { reactive, toRefs } = Vue let App = { template: `<div class="container">count: {{count}}<button @click="handlerCountAdd"> Click ++ </button></div>`, setup() { const state = reactive({ count: 0 }) const handlerCountAdd = () => { state.count++ } return { ...toRefs(state), handlerCountAdd } } } Vue.createApp().mount(App, '#app')
toRefs
vue3 提供的 ref 让我们有机会创建单个的响应式的对象，在 setup 函数中 return 出去之后，在模板中可直接访问
const App = { template: `<div class="container">{{value}}</div>`,
setup() { const value = ref(1) return { value } } } Vue.createApp().mount(App, '#app')
const App = { template: `<div class="container">{{state.value}}</div>`,
setup() { const state = reactive({ value: 'reactive' }) return { state } } } Vue.createApp().mount(App, '#app')
const App = { template: `<div class="container">{{value}}</div>`,
setup() { const state = reactive({ value: 'reactive' }) return toRefs(state) } } Vue.createApp().mount(App, '#app')
反转字符串 demo
let App = { template: `<div class="container">value: <input v-model="value"/><br/>rvalue: {{rvalue}}</div>`,
setup() { const state = reactive({ value: '', rvalue: computed(() => state.value.split('').reverse().join('')) }) return toRefs(state) } } Vue.createApp().mount(App, '#app')
数据响应式
在 Vue3 中实现数据响应式的方案由 Vue2 中的 Object.defineProperty 换成了 Proxy，关于数据响应式的Api上边说到了一些，还剩下 effect 和 watch 没有提及到，effect 是数据响应式中重要的一部分，watch 和 computed 都是基于 effect 的。
let App = { template: `<div class="container"> count: {{count}} <button @click="handlerCountAdd"> Click ++ </button></div>`, setup() { const state = reactive({ count: 0, value: 1 }) const handlerCountAdd = () => { state.count++ } watch( () => state.count, val => { console.log('watch', state.count) console.log('watch', state.value) } ) effect(() => { console.log('effect', state.count) console.log('effect', state.value) }) return { ...toRefs(state), handlerCountAdd } } } Vue.createApp().mount(App, '#app')
effect 在响应式数据变化的时候就会执行，执行次数根据响应式数据的个数来决定
let App = { template: `<div class="container"><button @click="handlerCountAdd"> Click ++ </button></div>`, setup() { const r = ref(1) const s = ref(1) const t = ref(1) const handlerCountAdd = () => { r.value *= 1 s.value *= 2 t.value *= 3 } effect(() => { console.log('effect', [r.value, s.value, t.value]) }) return { handlerCountAdd } } } Vue.createApp().mount(App, '#app')
而 watch 则点击一次 ，只会触发执行一次
let App = { template: `<div class="container"><button @click="handlerCountAdd"> Click ++ </button></div>`, setup() { const state = reactive({ count: 0, value: 1 }) const r = ref(1) const s = ref(1) const t = ref(1) const handlerCountAdd = () => { r.value *= 1 s.value *= 2 t.value *= 3 } watch([r, s, t], val => { console.log('watch', val) }) return { handlerCountAdd } } } Vue.createApp().mount(App, '#app')
生命周期
beforeCreate => setup(替代) created => setup(替代) beforeMount => onBeforeMount mounted => onMounted beforeUpdate => onBeforeUpdate updated => onUpdated beforeDestroy => onBeforeUnmount destroyed => onUnmounted errorCaptured => onErrorCaptured
全局配置
Vue2.x 创建实例并且挂载 DOM 上
import Vue from "vue"; import App from './App.vue'
new Vue({ render: (h) => h(App) }).$mount("#app");
Vue3.0 新增 api ===> createApp 创建实例
createApp 会产生一个 app 实例，该实例拥有全局的可配置上下文 import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
vue 函数
createApp const app = createApp(App) app.use(store) app.use(router) app.mount('#app')
传了两个属性
v-model:selectKeys = "selectKeys"
import {reactive,toRef } from 'vue export default{ setup(props,ctx){ //默认执行一次 //页面使用 state.selectKeys const state = reactive({ //attr slots emit selectKeys:0 }) //1.直接使用 return { selectKeys:state.selectKeys } //2.导出,页面上直接使用，数据响应式还带解构 return { ...toRefs(state) } onMounted(()=>{ }) } }
监听路由变化
import {reactive,toRef,watch } from 'vue import {useRoute} from 'vue-router' export default{ setup(props,ctx){ const state = reactive({ //attr slots emit selectKeys:0 }) //1.watch监控路由变化 watch(()=>route.path,(newValue)=>{ state.selectKeys = [newValue] }) //2.computed监控路由变化 const selectKeys = computed(()=>{ return [route.path] }) return { selectKeys } } }
vuex
import {reactive,toRef,watch ,computed} from 'vue' import {useRoute} from 'vue-router' export default{ setup(props,ctx){ const route = userRoute() const store = useStore() const state = reactive({ //attr slots emit
selectKeys:0 }) //1.watch监控路由变化
watch(()=>route.path,(newValue)=>{ state.selectKeys = [newValue] }) //2.computed监控路由变化
const selectKeys = computed(()=>{ return [route.path] }) //ref 把普通值变成包装后的结构,将属性变成响应式
// ref(store.getters.allTime)
return { selectKeys, allTime:ref(store.getters.allTime) } } } //store.js
import {createStore} from 'vuex export default { state:{ }, getters:{ allTime:()=>{ return 0 } }, mutations:{ }, actions:{ }, modules:{ } }
组件通信
import {reactive,toRef,watch ,computed} from 'vue' import {useRoute} from 'vue-router' import moment from 'moment' export default{ setup(props,ctx){ const state = reactive({ form:{ date:moment(Date.now()).format('YYYY-MM-DD') } }) //方法函数
const onSubmit =()=>{ //传给父组件
this.$emit('handlePlan',state.form) } return { ...toRefs(state), onSubmit } } } //父组件
<Child @handlePlan="handlePlan" />
import {reactive,toRef,watch ,computed} from 'vue' import {useRoute} from 'vue-router' import moment from 'moment' export default{ setup(props,ctx){ const state = reactive({ form:{ date:moment(Date.now()).format('YYYY-MM-DD') } }) const handlePlan = (plan)=>{ console.log(plan) } return { handlePlan } } }
封装 API
// 环境变量
VUE_APP_URL = 'http://www.xxx.com:3000'
import axios from 'axios const instance = axios.create({ baseURL:process.env.VUE_APP_URL, timeout:3000 }) instance.interceptors.request.use((config)=>{ return config }) instance.interceptors.response.use((res)=>{ return res.data.data },err=>{ return Promise.reject(err) }) export function request(opts){ return instance(opts) }
//request.js
import {request } from '../utils/axios' export function getPlanList(){ return request({url:'/plan',method:'get'}) } export function addPlan(data){ return request({url:'/plan',method:'post',data}) } export function deletePlan(){ return request({url:'/plan',method:'delete',params:{id}}) } //action_type.js
export const SET_PLAN_LIST = 'SET_PLAN_LIST' export const ADD_PLAN = 'ADD_PLAN' export const DELETE_PLAN = 'DELETE_PLAN'
//store.js
import {createStore} from 'vuex' export * as types from './action_type' import * as api from './request' export default { state:{ }, getters:{ allTime:()=>{ return 0 } }, mutations:{ [type.ADD_PLAN](state,payload){ state.planList = [...state.planList,payload] }, [type.DELETE_PLAN](state,payload){ state.planList.filter(item=>{ return item._id !=payload._id }) }, [type.SET_PLAN_LIST](state,payload){ }, }, actions:{ //restful api根据不同方法返回不同的资源
async [type.ADD_PLAN]({commit},payload){ let plan = await api.addPlan(payload) commit(type.ADD_PLAN,plan) }, async [type.DELETE_PLAN]({commit},payload){ let plan = await api.deletePlan(payload) commit(type.DELETE_PLAN,plan) }, async [type.SET_PLAN_LIST]({commit},payload){ let plan = await api.getPlanList(payload) commit(type.SET_PLAN_LIST,plan) }, }, modules:{ } }
使用数据
import {reactive,toRef,watch ,onMounted,onUpdated,compile,computed} from 'vue' import {useStore} from 'vuex' import moment from 'moment' import * as types from '@/store/action_types' export default{ setup(props,ctx){ const store = useStore() // const state = reactive({
// planList:store.state.planList //这样取的是默认值
// })
onMounted(()){ store.dispatch(types.SET_PLAN_LIST) } //时间格式化方法
const formatDate = (value)=>{ return moment(value).format('YYYY-MM-DD') } return { ...toRefs(state.store), formatDate } } }
简版 vue
//1.创建虚拟节点，将虚拟节点转化为真实节点 //2.组件的实现 setup //3.reactive api实现effect //4.diff算法 //5.vite
let { render} = Vue const state = { count:0 } const vnode = { tag:'div', props:{color:'red'}, children:[ { tag:'p', props:{color:'blue}, children:[ 'vue@3-计数器' ] }, { tag:'p', props:{ onClick:()=>{ alert(state.count) } } children:[ 'vue@3-计数器' ] } ] } render(vnode,app) export function render(vnode,container){ // 渲染页面的方法叫patch //1.第一次渲染 2.dom-diff patch(null,vnode,container) } /** * n1 老的虚拟节点 * n2 新的虚拟节点 * container 容器 */ function patch(n1,n2,container){ //组件的虚拟节点是一个对象，tag是一个对象 //如果是组件，tag可能是个对象 //后续diff可以执行这个方法 if(typeof n2.tag ==='string'){ //标签 mountElement(n2,container) }else if(typeof n2.tag==='object'){ } } function mountElement(vnode,container){ const { tag,children,props } = vnode //虚拟节点和真实节点做映射关系 let el = (vnode.el = nodeOps.createElement(tag)) if(Array.isArray(children)){ mountChild(children,el) }else{ nodeOps.hostSetElementText(el,children) } container.insert(el,container) } function mountChild(children,container){ for(var i=0;i<children.length;i++){ let child = children[i] patch(null,child,container) } } //节点操作方法 exoprt const nodeOps = { //插入元素节点 insert(child,parent,anchor){ if(anchor){ parent.insertBefore(child,anchor) }else{ parent.appendChild(child) } }, //移除节点 remove(child){ const parent = child.parentNode; parent && parent.removeChild(child) }, //创建节点 createElement(tag){ return document.createElement(tag) }, //设置文本内容 hostSetElementText(el,text){ el.textContent = text } }
未完待续。。。