一、组合式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中的生命周期函数不包括beforeCreatecreated

二、setup中使用axios

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

2.赋值时,使用refreactive实现数据绑定

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参数是一个函数时,函数的返回值就是计算属性的结果,是一个只读的属性;当参数是一个包含getset的对象时,返回的就是一个可写的属性

打包

1.打包命令:npm run build

2.打包配置:

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

3.接口配置:判断当前所处环境配置axiosbaseURL

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')

Logo

前往低代码交流专区

更多推荐