vue知识 - 技术栈

vue知识

qq_165706072024-08-05 16:11

vue组件间传值的方式

常见使用场景可以分为三类：

1、父子通信：父向子传递数据是通过 props，子向父是通过 events（ $emit）；通过父链 / 子链也可以通信（$ parent / $children）；ref 也可以访问组件实例；provide / inject；$ attrs / $listeners。

2、兄弟通信： Bus；Vuex。

3、跨级通信： Bus；Vuex；provide / inject； $attrs /$ listeners。

vue2与vue3的区别

响应式方案不同

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持。

vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。

获取prop的方式不同

vue2在script代码块可以直接获取props，vue3通过setup指令传递。

javascript 复制代码

vue2：console.log('props',this.xxx)
vue3：setup(props,context){ console.log('props',props) }

数据和方法的定义不同

Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）。

vue2:

javascript 复制代码

data() { return {}; }, methods:{ }

vue3:

数据和⽅法都定义在setup中，并统⼀进⾏return{}。

给父组件传值emit的方式不同

javascript 复制代码

vue2：this.$emit()
vue3：setup(props,context){context.emit()}

路由写法的不同

vue3路由写法：

javascript 复制代码

<script>
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    next()
  },
  beforeRouteLeave ((to, from, next)=>{//离开当前的组件，触发
    next()       
  }),
  setup() {
    const router = useRouter()
    const route = useRoute()
    const toPage = () => {
      router.push(xxx)
    }
 
    //获取params 注意是route
    route.params
    //获取query
    route.query
    return {
      toPage
    }
  },
});
</script>

vue2写法：

javascript 复制代码

<script>
export default {
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    next()
  },
  beforeRouteLeave((to, from, next)=>{//离开当前的组件，触发
    next()      
  }),
  methods:{
    toPage(){
      //路由跳转
      this.$router.push(xxx)
    }
  },
  created(){
    //获取params
    this.$route.params
    //获取query
    this.$route.query
  }
}
</script>