Vue3.0再不学就out了！来跟我一起学，含集成ts、router、vuex等使用方法

1. 如何在vue中集成ts

vue-cli 创建项目时选择ts依赖

• yarn add typescript 进行安装

vite 安装ts

• vite—>vue/vue-ts

• 就可以直接写ts代码了
  可以学习下typescript—》点击蓝色字体跟我一起快速入门ts哦
  学了typescript之后再用ts的写法来写vue组件代码

2. composition API 中 使用vue-router

mian.js中：
我们在vue2中常用到的Vue对象，在vue3中由于直接使用了createApp方法“消失”了，但实际上使用createApp方法创造出来的app就是一个Vue对象，在vue2中经常使用到的Vue.use()，在vue3中可以换成app.use()正常使用；在vue3的mian.js文件中，使用vue-router直接用app.use()方法把router调用了就可以了。

由于在setup中不能使用this, 因为setup在初始化之前执行的，所以setup无法访问this
setup是一个独立的钩子函数，不会依赖vue实例组件，如果用到外部函数，都需要从外部获取
不能再直接访问 this. $router 或 this.$route 作为代替，我们使用useRouter和useRoute函数

• 2.1创建路由

// 引用两个函数，一个是创建路由对象，一个是路由模式
import {createRouter,createWebHashHistory} from 'vue-router'

// 导出创建路由对象
export default createRouter({
  // 设置路由模式
  history:createWebHashHistory(),
  // 路由信息对象
  routes
})

• 引用

 import {useRouter,useRoute} from 'vue-router'

• 2.2 使用

  setup(props) {
    const router = useRouter()   //等同于this.$router
    const route = useRoute()   //等同于this.$router
  }

3. composition API 中 使用vuex

• vuex也是无法使用this.$store
  • 2.1 引用

 import {useStore} from 'vuex'

• 2.2 使用

  // 在组合api中是不支持辅助函数
  setup() {
    const store = useStore()
// 创建响应式对象，接受一个普通对象，返回一个响应式数据对象
    const data = reactive({
      iscount:computed(()=> store.state.count*2),
      doubelCount:computed(()=> store.getters.doubel)
    })
    // 上下都可
    // const iscount = computed(()=> store.state.count*2)
    // 提交mutations
    const cAdd=()=>{
      store.commit('add')
    }
    const cAddVal=(val)=>{
      store.commit('addVal',val)
    }
    const asyncAdd = ()=>{
      store.dispatch('asyncAdd')
    }
  return{
        ...toRefs(data),
        cAdd,
        cAddVal,
        asyncAdd
      }
  },

快速入门Vue3.0！跟我入门第一天，一起来看看跟vue2的区别
前端老实人 发表于 2021/11/25 16:58:13 22 0 1编辑删除
【摘要】 vue3.0可以有多个根节点 1.setup函数的用法，可以代替vue2中的data和methos属性，compued属性，都是直接写在setup中就可以了//在script上加setup属性，组件编译过程中的代码运行是在setup函数中，所有es模块导出都认为暴露给上下文的值，并且包含在setup()返回对象中// 定义setup// setup是组件使用Composition API的…
vue3.0可以有多个根节点
1.setup
函数的用法，可以代替vue2中的data和methos属性，compued属性，都是直接写在setup中就可以了

//在script上加setup属性，组件编译过程中的代码运行是在setup函数中，所有es模块导出都认为暴露给上下文的值，并且包含在setup()返回对象中

// 定义setup
// setup是组件使用Composition API的入口函数
// 接收两个参数：props(接受组件props的属性),context(上下文对象，包含一些属性attrs,slots,emit)
// ,这些属性在vue2中需要通过this才能访问
setup(props,context) {
console.log(‘1’);
// 在vue3的setup中不能访问vue2的this对象，只能在setup中通过context访问this中常用的几个属性
// console.log(this.$emit());
}
2.ref
定义一个响应式的数据对象，如果要template中使用数据对象，必须return出去

ref:可以定义：字符串，数组，数组对象，对象 -如果访问ref中的属性数据，必须通过属性名，value
// composition API
// data,methods,computed,watch都是写在setup中
setup(){//在setup里定义数据一定要返回出去return
// 直接真么定义不是响应式的数据
// const count = 0
// 创建响应式数据对象count ，初始值为0
const count = ref(0)
const list = ref([‘特仑苏’,‘追梦’])
// 定义数组对象
const user = ref([
{id:101,name:‘特仑苏’},
{id:102,name:‘追梦’},
])
// 在这里面写函数不需要写逗号
let updUser=()=>{
// 修改数据
user.value[0].name=“Terrance”
}
let getCount = ()=>{
// 如果要访问ref()创建出来响应式数据对象的值，必须通过value属性才可以
console.log(count.value);
}
}
3.reactive
也是用来定义响应式数据对象，类似vue2x中的data()返回的响应式对象

ref 与 reactive 这两种方法定义的都是响应式对象
ref：比较推荐定义基本数据类型
reactive: 推荐定义复杂数据类型时使用
4.torefs:
解构响应式对象的数据

把一个响应式对象转换成普通对象，普通对象的属性都一个ref,和响应式的属性一一对应
5.computed
计算属性 和vue2中的计算属性用法一样，computed写在setup函数中

setup(){//在setup里定义数据一定要返回出去return
// reactive也是创建响应式对象的
// reactive创建的响应式数据对象，类似vue2x中的data()返回的响应式对象
const data= reactive({
test:‘测试’,
user:{
name:‘木道人’,
sex:‘男’
},
list:[‘a’,‘b’,‘c’]
})
// 访问reactive时可以直接访问不用别的参数
console.log(data.test);
// 创建一个响应式对象user
const user = reactive({
firsName:’’,
lastName:’’
})
// 根据user的值，创建一个响应式的计算属性fullName
// 他会根据依赖自动计算返回一个新的响应式数据(ref)
const fullName = computed(()=>{
return user.firsName + ‘’ +user.lastName
})

    const  getFullName=()=>{
      console.log(fullName.value);
    }
return{
  // 结构响应式数据对象
  // 用...扩展运算符解构响应式对象数据是不可行的，
  // 因为解构后就变成了普通变量，就没有了响应式的能力
  // ...data
    // toRefs把一个响应式的对象转换成普通对象，对data进行了包装，
    // 再使用...拓展符的方式，成为响应式的解构
  ...toRefs(data),
  ...toRefs(user),
  // 计算属性
  fullName,
  getFullName
}

}

最后

如果对您有帮助，希望能给个👍评论收藏三连！

博主为人老实，无偿解答问题哦❤