vue3入门基础

一、组合式API

1.setup：一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口 -- 不能使用this

2.两种使用方式：1.作为组件选项：是一个函数，返回一个对象，对象中的property就可以在模板中访问

2.在<script>标签中设置setup属性

3.作为组件选项：是一个函数，可以接收两个参数

二、setup使用生命周期函数

1.通过在生命周期钩子前加on，可以在setup中访问组件的生命周期钩子

2.使用：

1.导入对应的生命周期函数
import {onMounted} from 'vue'
2.在setup中使用
setup(){
    onMounted(){
        console.log('mounted...')
    }
}

3.注意：setup中的生命周期函数不包括beforeCreate和created

二、setup中使用axios

1.不再直接使用globalProperties中的axios，可以写接口文件导入，或者直接在组件中导入axios

2.赋值时，使用ref或reactive实现数据绑定

import { ref,reactive,toRef,onMounted} from 'vue';
import Axios from 'axios'; //导入axios
​
export default {
  setup(){
    // let result = reactive({list:[]});
    let list = ref([]);
    //生命周期函数
    onMounted(()=>{
      getVideo();
    })
    //使用axios调用后台视频接口
    const getVideo = ()=>{
      Axios.get("/apis/video").then(data=>{ 
        // result.list = data.data;
        list.value = data.data;
        //list = data.data; //这是错误写法，因为重新给list赋值会切断list和源数据的双向绑定关联性
      })
    }
    return {
      // list:toRef(result,'list'),  //将result下的list转为一个关联result的响应式数据
      list,
    }
  },
}

3.注意：1.ref()：如果将对象分配为ref 值，则它将被 reactive 函数处理为深层的响应式对象

2.toRef()：可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接

三、setup使用computed

1.导入computed

import {computed} from 'vue'

2.使用：setup中的computed是一个函数，返回一个计算属性

const list = computed(()=>val)  --  只读
const list = computed({
    get(){return val;},
    set(val){}
})

3.注意：当computed参数是一个函数时，函数的返回值就是计算属性的结果，是一个只读的属性；当参数是一个包含get和set的对象时，返回的就是一个可写的属性

打包

1.打包命令：npm run build

2.打包配置：

publicPath:'/', //静态资源相对的路径，默认为/，表示静态资源在根目录，如果需要部署在任意目录则设置为'./'或''
outputDir:'dist', //打包之后的文件放置目录，默认为dist
assetsDir:'', //静态资源相对于outputDir的目录，默认为空
indexPath:'index.html',  //打包之后的首页
productionSourceMap:false, //打包之后是否需要sourceMap文件，设置为false可以加快打包速度

3.接口配置：判断当前所处环境配置axios的baseURL

1.main.js中配置全局
import Axios from 'axios'
Axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '/apis' : 'http://localhost';
app.config.globalProperties.$http = Axios;
接口调用：this.$http.get('/video')

2.将Axios封装后再在组件中自行调用
封装Axios:api/api.js
import Axios from 'axios'
Axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? '/apis' : 'http://localhost';
export default Axios;
接口调用：
import Axios from '@/api/aip.js'
Axios.get('/video')