前端文档

Appearance

On this page

globalProperties

  • vue2.x 挂载全局方法或属性
js
import Vue from 'vue';

//工具方法
const utils= {
  //传入key 获取 LocalStorage数据
  getLocalStorage = (key: string) =>{
    var value = localStorage.getItem(key);
    return value ? JSON.parse(value) : false;
  },
  //等等等... 方法 
}

//把工具方法挂载到 Vue 原型上
Vue.prototype.$utils = utils;

//组件中通过以下访问
this.$utils.getLocalStorage('keyName');
import Vue from 'vue';

//工具方法
const utils= {
  //传入key 获取 LocalStorage数据
  getLocalStorage = (key: string) =>{
    var value = localStorage.getItem(key);
    return value ? JSON.parse(value) : false;
  },
  //等等等... 方法 
}

//把工具方法挂载到 Vue 原型上
Vue.prototype.$utils = utils;

//组件中通过以下访问
this.$utils.getLocalStorage('keyName');
  • vue3.0 挂载全局方法或属性
js
//打开 main.ts 文件
import App from './App.vue';
import { createApp } from 'vue';

const app = createApp(App);

//工具方法
const utils= {
  //传入key 获取 LocalStorage数据
  getLocalStorage = (key: string) =>{
    var value = localStorage.getItem(key);
    return value ? JSON.parse(value) : false;
  },
  //等等等... 方法 
}

//把工具方法挂载到app.config.globalProperties上
app.config.globalProperties.$utils = utils;
//打开 main.ts 文件
import App from './App.vue';
import { createApp } from 'vue';

const app = createApp(App);

//工具方法
const utils= {
  //传入key 获取 LocalStorage数据
  getLocalStorage = (key: string) =>{
    var value = localStorage.getItem(key);
    return value ? JSON.parse(value) : false;
  },
  //等等等... 方法 
}

//把工具方法挂载到app.config.globalProperties上
app.config.globalProperties.$utils = utils;
js
//组件中访问
import { defineComponent, getCurrentInstance } from 'vue';

export default defineComponent({
  name: 'component-name',
  setup(){
    //proxy 相当于vue 2.x中this, 
    const { proxy } : any = getCurrentInstance(); 

    //调用工具方法
    proxy.$utils.getLocalStorage('keyName')
  }
})
//组件中访问
import { defineComponent, getCurrentInstance } from 'vue';

export default defineComponent({
  name: 'component-name',
  setup(){
    //proxy 相当于vue 2.x中this, 
    const { proxy } : any = getCurrentInstance(); 

    //调用工具方法
    proxy.$utils.getLocalStorage('keyName')
  }
})

路由

  • 组件中使用
js
import { useRouter, useRoute } from 'vue-router';

export default defineComponent({
    name: 'component-name',
    setup(){
      //Vue Router
      const router = useRouter();
      //Vue Route
      const route = useRoute();

      //监听 Route
      watch(route, (newVal, oldVal) => {
        //newVal和oldVal 对象跟vue2 基本一样的
      });

      //http://localhost:8000/script/watch/110?id=110
      //获取query 参数
      route.query.id

      //获取params 参数
      route.params.id

      //路由跳转 router 对象使用跟vue2 一样
      router.push('/');

      router.push({ path: '/' });

      router.push({ name: 'home' });

      router.push({ name: 'home', query: { id: 110 } });

      router.push({ name: 'home', params: { id: 110 } });
    }
})
import { useRouter, useRoute } from 'vue-router';

export default defineComponent({
    name: 'component-name',
    setup(){
      //Vue Router
      const router = useRouter();
      //Vue Route
      const route = useRoute();

      //监听 Route
      watch(route, (newVal, oldVal) => {
        //newVal和oldVal 对象跟vue2 基本一样的
      });

      //http://localhost:8000/script/watch/110?id=110
      //获取query 参数
      route.query.id

      //获取params 参数
      route.params.id

      //路由跳转 router 对象使用跟vue2 一样
      router.push('/');

      router.push({ path: '/' });

      router.push({ name: 'home' });

      router.push({ name: 'home', query: { id: 110 } });

      router.push({ name: 'home', params: { id: 110 } });
    }
})
  • 函数中使用 和vue2一样
js
import router from '@/router';

router.push({ path: '/' })
import router from '@/router';

router.push({ path: '/' })

vuex 全局状态

  • 组件中使用
js
import { useStore } from 'vuex';
//vuex 全局状态接口  
import { IGlobalState } from '@/store';

export default defineComponent({
    name: 'component-name',
    setup(){
      //vue vuex store
      const store = useStore<IGlobalState>();

      //获取 vuex 数据  vue3 不存在深度监听vuex 数据, computed 返回的就是ComputedRef 响应式对象
      const userData = computed(() => store.state.userInfo.data);

      //提交 mutations
      store.commit('userInfo/setUserInfo', {});

      //提交 actions
      store.dispatch('userInfo/setUserInfo', {});
    }
})
import { useStore } from 'vuex';
//vuex 全局状态接口  
import { IGlobalState } from '@/store';

export default defineComponent({
    name: 'component-name',
    setup(){
      //vue vuex store
      const store = useStore<IGlobalState>();

      //获取 vuex 数据  vue3 不存在深度监听vuex 数据, computed 返回的就是ComputedRef 响应式对象
      const userData = computed(() => store.state.userInfo.data);

      //提交 mutations
      store.commit('userInfo/setUserInfo', {});

      //提交 actions
      store.dispatch('userInfo/setUserInfo', {});
    }
})
  • 函数中使用 和vue2一样
js
import store from '@/store';

const userData = (store as any).state.userInfo.data;
import store from '@/store';

const userData = (store as any).state.userInfo.data;

注册全局组件

js
const app = Vue.createApp({});

import vModel from '@/component/model';

app.component(vModel);
const app = Vue.createApp({});

import vModel from '@/component/model';

app.component(vModel);

nextTick

js
/* vue2 */
export default {
  data () {
    return {
      orderList: []
    }
  },
  created(){
    this.getOrderList();
  },
  methods: {
    getOrderList(){
      orderList = [ ...N条数据 ];
      this.$nextTick(function() {
        console.log('例如更新滚动条插件')
      })
    }
  }
}
/* vue2 */
export default {
  data () {
    return {
      orderList: []
    }
  },
  created(){
    this.getOrderList();
  },
  methods: {
    getOrderList(){
      orderList = [ ...N条数据 ];
      this.$nextTick(function() {
        console.log('例如更新滚动条插件')
      })
    }
  }
}
js
/* vue3 */
import { defineComponent, reactive, nextTick } from 'vue'

export default defineComponent({
  setup() {
    const orderList: object[] = reactive([]);
    
    const getOrderList = async () => {
      orderList = [ ...N条数据 ];
      await nextTick();
      //dom渲染完成

      console.log('例如更新滚动条插件')
    }
    getOrderList();
  }
})
/* vue3 */
import { defineComponent, reactive, nextTick } from 'vue'

export default defineComponent({
  setup() {
    const orderList: object[] = reactive([]);
    
    const getOrderList = async () => {
      orderList = [ ...N条数据 ];
      await nextTick();
      //dom渲染完成

      console.log('例如更新滚动条插件')
    }
    getOrderList();
  }
})

全局 Mixin

js
vue hook 代替
vue hook 代替

Event Bus vue3废弃, 使用mitt代替

js