Vue 3

Vue3

npm init vite

特性：

1. 组合式 API
2. Teleport
3. 片段(Fragment)
4. 触发组件选项
5. 单文件组件组合式 API 语法糖 (script setup)
6. 生命周期钩子
7. Suspense

Vite与Webpack

1. webpack打包是递归依赖,构建AST抽象语法树,再把抽象语法树转成浏览器可识别的代码
   Vite通过劫持浏览器请求,将文件进行分解和整合，无需打包编译，速度很快。
2. webpack使用NodeJS实现，Vite使用Go语言编写的esbuild预构建依赖，速度快至少10倍。
3. webpack生态更加强大，插件丰富，Vite伴随Vue3刚刚诞生，还需要沉淀和版本迭代。

main.js发生的变化

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

index.html

vite通过html5原生的type=”module”属性来支持ES6的模块化语法

<script type="module" src="/src/main.js"></script>

子传父/父传子

<!-- 
  子传父：:list="gogo"
  1. 将子元素引入 ：import son from "./son.vue";
  2. 设置要传递的值 ：let gogo = [1, 2, 3];
  3. 将子元素放到明面上：<son :list="gogo"></son>
  4. 去子页面拿到父页面传来的值 ：props: ["list"],setup(props){。。。}
  5. 在子元素上写入<p>{{ 从父元素拿到的值 }}</p>
 -->
 <!-- 
   父传子：
   1. 将子元素引入 ：import son from "./son.vue";
   2. 设置要接收传递的标签：<son @newTodo="play"></son>
   3. 给父元素创建一个函数，获得的数据来自子元素：let play = (name) => {}
   4. 子元素设置触发标签 ：<button @click="play">你好</button>
   5. 子元素设置响应事件 ：  let play = function (name) {context.emit("newTodo", name);}
  -->

<!-- 父组件 -->
<template>
    <!-- 允许有多个根标签 -->
  <div>
    <p>123</p>
    <son :list="gogo" @newTodo="play"></son>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  setup() {
    let gogo = [1, 2, 3];
    let play = (name) => {
      alert("你好:" + name);
    };
    return {
      gogo,
      play,
    };
  },
  components: {
    son,
  },
};
</script>

<!-- 子组件 -->
<template>
  <p>123</p>
  <p>{{ gogo }}</p>
  <button @click="play">你好</button>
</template>

<script>
export default {
  props: ["list"],
  setup(props, context) {
    let gogo = props.list;
    // let plays = ;
    let play = function (name) {
      name = "李尚恒";
      context.emit("newTodo", name);
    };
    return {
      gogo,
      play,
    };
  },
};
</script>
<style scoped lang="scss"></style>

响应式数据之ref

• 创建一个普通的响应式数据

<template>
  <p>{{ a }}</p>
</template>

<script>
import { reactive, ref, toRefs } from "vue";

export default {
  setup() {
    var a = ref(123);
    console.log(a.value);
    a.value = 456;
    return {
      a,
    };
  },
};
</script>

<style scoped lang="scss"></style>

• 给某个标签或组件添加ref，可以获得该组件/标签

响应式数据之 reactive

想创建一个响应式的对象时，使用reactive

reactive：反应

<template>
  {{ obj.name }}--{{ obj.age }}
  <br />
  <input type="text" v-model="obj.name" />
  <input type="number" v-model="obj.age" />
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    var obj = reactive({
      name: "",
      age: "",
    });
    return {
      obj,
    };
  },
};
</script>
<style scoped lang="scss"></style>

计算属性computed

<!-- computed -->
<template>
  <input type="text" v-model="aaa" placeholder="原数据" />
  <p>{{ aaa }}</p>
  <p>{{ bbb }}</p>
</template>

<script>
import { computed, ref } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    return {
      aaa,
      bbb,
    };
  },
};
</script>
<style scoped lang="scss"></style>

监视器 watch

<script>
import { computed, ref, watch } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    watch(
      aaa,
      (newValue, oldValue) => {
        console.log(newValue);
        console.log(oldValue);
      },
      { immdiate: true, deep: true }
    );
    return {
      aaa,
      bbb,
    };
  },
};
</script>

监视器 watchEffect

<script>
import { computed, ref, watch, watchEffect } from "vue";
export default {
  setup() {
    let aaa = ref(null);
    let bbb = computed(() => {
      return aaa.value * 2;
    });
    watch(
      aaa,
      (newValue, oldValue) => {
        console.log(newValue);
        console.log(oldValue);
      },
      { immdiate: true, deep: true }
    );
    // 
    watchEffect(() => {
      console.log(aaa.value, bbb.value);
    });
    return {
      aaa,
      bbb,
    };
  },
};
</script>

钩子函数

Vue2	Vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destoryed	onUnmounted
activated	onActivatide
deactivated	onDeactivatide
errorCaptured	onErrorCaptured
	on

provide/inject

<!-- 父组件 -->  
setup() {
    provide("color", "color : red");
	}

<!-- 子孙组件 -->
<p :style="colors">XXX</p>
······js代码
setup() {
let colors = inject("color");
	}
······

Hooks

方法：在src下创建Hooks文件夹

目的：将计算与页面分离

hooks页面下创建num标签
import { ref, computed } from 'vue'
export default function (num = 100) {
  let num1 = ref(num)
  let num2 = computed(() => num1.value * 2)

  const jia = () => {
    num1.value++
  }
  const jian = () => {
    num1.value--
  }
  return {
    num1, num2, jia, jian
  }
}

<template>
  <p>原数据{{ num1 }}</p>
  <p>加倍{{ num2 }}</p>
  <button @click="jian">-</button> -- <button @click="jia">+</button>
</template>

<script>
import { reactive, toRefs } from "vue";
import aaa from "../hooks/num";
export default {
  setup() {
    let { num1, num2, jia, jian } = aaa();
    return { num1, num2, jia, jian };
  },
};
</script>

<style scoped lang="scss"></style>

Teleport（瞬移）

概念：将子组件或deom节点插入到任何你想插入的HTML标签中

<template>
  <p class="aaa">原数据</p>
  <p>加倍{{ num2 }}</p>
  <button @click="jian">-</button> 
  <button @click="jia">+</button>
  <Teleport to=".aaa"><span>{{ num1 }}</span> </Teleport>
</template>

Suspense（不确定的）

场景：给某个组件的setup加上了async，导致这个组件变成了异步组件，普通的引入是无效的

作用：Suspense帮助我们正确的显示异步组件内容

<Suspense>
	<template v-show:default>
    	<异步组件></异步组件>
    </template>
	<template v-show:fallback>
    	Loading[当异步组件无法显示时，显示的内容]
    </template>
</Suspense>

1.创建hooks.async.js返回异步结果
export default function () {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('success')
    }, 2000)
  })
}

<!-- 2. 引入async.js,获取异步结果。给setup加上async之后，当前组件成为异步组件 -->
<template>
  <div>{{red}}</div>
</template>

<script>  
import async from "../hooks/async";
export default {
  async setup() {
    let red = await async();
    return {
      red,
    };
  },
};
</script>
<style scoped lang="scss"></style>

router

安装：npm i vue-router@4

在routers/index.js下写
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";

import A from '../views/a.vue'

export default createRouter({
  // 代替vue-router3里的mode
  history: createWebHistory(), // history模式，不带#（模式必须指定）
  // history:createWebHashHistory(), // hash模式，带# 
  routes: [
    {
      path: '/',
      redirect: '/a'
    },
    {
      path: '/a',
      component: A
    },
    {
      path: '/b',
      component: () => import('../views/b.vue')
    },
    {
      path: '/c/:ids',	// 传参
      component: () => import('../views/c.vue')
    }
  ]
})

<template>
  <router-view></router-view>
  <hr />
  <router-link to="/a">a</router-link>
  <router-link to="/b">b</router-link>
  <!-- <router-link to='/c/1234'>c</router-link> -->
  <button @click="toC">c</button>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter(); //实例化router，用来跳转的
    // const route = useRoute();
    let toC = () => {
      return router.push("/c/123");
    };
    return {
      toC,
    };
  },
};
</script>

<style scoped lang="scss"></style>

子页面：编程式导航
<template>c.vue--{{ ids }}</template>

<script>
import { useRoute } from "vue-router";

export default {
  setup() {
    const route = useRoute(); //用来接收参数
    return { ids: route.params.ids };
  },
};
</script>

<style scoped lang="scss"></style>

Vuex

安装：npm i vuex@next -S

axios

1. npm install axios
2. 封装axios请求
   在src目录下建立 utils文件夹，并在utils文件夹里面新建request.js

import Axios from 'axios'
const axios = Axios.create({
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 60000, // 超时
  baseURL: 'http://localhost:8080' // 请求接口地址，这里使用本项目地址，因为我们是前后端分离，后面需要在vue.config.js里面配置代理，实际请求得地址不是这个。
})

// 请求拦截
axios.interceptors.request.use(req => {
  if (req.method === 'get') {
    const url = req.url
    const t = new Date().getTime()
    if (url.indexOf('?') >= 0) {
      req.url = `${url}&t=${t}`
    } else {
      req.url = `${url}?t=${t}`
    }
  }
  return req
})

// 响应拦截
axios.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 响应失败统一处理
    const { response } = error
    if (response) {
      switch (response.status) {
        case 400:
          window.$vm.$message.error('请求无效')
          break
        case 401:
          window.$vm.$message.error({ message: '尚未登录请重新登录' })
          break
        case 403:
          window.$vm.$message.error('您没有权限这样做，请联系管理员')
          break
        case 404:
          window.$vm.$message.error('请求未找到')
          break
        case 500:
          window.$vm.$message.error('系统异常')
          break
        case 504:
          window.$vm.$message.error('请求超时，请稍后再试')
          break
        default:
          window.$vm.$message.error('系统异常')
          break
      }
    }
    return Promise.reject(error)
  }
)
export default axios

3、创建api文件
在src目录下创建api文件夹，存放请求接口信息，在api文件夹下创建一个article.js

import request from '@/utils/request' // 引入封装得axios

// 获取新闻列表
export function getArticleList (data) {
  return request({
    url: '/web/getArticleList',
    method: 'POST',
    data
  })
}

4、配置代理
在项目根目录下创建vue.config.js文件，代码如下，target需要配置你实际请求的接口地址域名，这样就可以通过代理请求到后台接口数据

module.exports = {
  devServer: {
    proxy: {
      '/web': {
        target: 'http://api.xxxxxxx.cn',
        changeOrigin: true
      }
    }
  }
}

5、在页面中使用