vue2与vue3的区别

setup () {

const state = reactive({ //数据

username: ‘’,

password: ‘’,

lowerCaseUsername: computed(() => state.username.toLowerCase()) //计算属性

})

//方法

const login = () => {

// 登陆方法

}

return {

login,

state

}

}

}

4. 建立数据 data

Vue2 - 这里把数据放入data属性中

export default {

props: {

title: String

},

data () {

return {

username: ‘’,

password: ‘’

}

}

}

在Vue3.0,我们就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。

使用以下三步来建立反应性数据:

  1. 从vue引入reactive

  2. 使用reactive()方法来声名我们的数据为响应性数据

  3. 使用setup()方法来返回我们的响应性数据,从而我们的template可以获取这些响应性数据

import { reactive } from ‘vue’

export default {

props: {

title: String

},

setup () {

const state = reactive({

username: ‘’,

password: ‘’

})

return { state }

}

}

template使用,可以通过state.username和state.password获得数据的值。

{{ state.username }}

5. 生命周期钩子 — Lifecyle Hooks

Vue2--------------vue3

beforeCreate -> setup()

created -> setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

activated -> onActivated

deactivated -> onDeactivated

  1. setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method

  2. onBeforeMount() : 组件挂载到节点上之前执行的函数。

  3. onMounted() : 组件挂载完成后执行的函数。

  4. onBeforeUpdate(): 组件更新之前执行的函数。

  5. onUpdated(): 组件更新完成之后执行的函数。

  6. onBeforeUnmount(): 组件卸载之前执行的函数。

  7. onUnmounted(): 组件卸载完成后执行的函数

  • 若组件被<keep-alive>包含,则多出下面两个钩子函数。
  1. onActivated(): 被包含在中的组件,会多出两个生命周期钩子函数。被激活时执行 。

  2. onDeactivated(): 比如从 A组件,切换到 B 组件,A 组件消失时执行。

6.父子传参不同,setup() 函数特性

总结:

1、setup 函数时,它将接受两个参数:(props、context(包含attrs、slots、emit))

2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3、执行 setup 时,组件实例尚未被创建(在 setup() 内部,this 不会是该活跃实例的引用,即不指向vue实例,Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined

4、与模板一起使用:需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

5、使用渲染函数:可以返回一个渲染函数,该函数可以直接使用在同一作用域中声明的响应式状态

注意事项:

1、setup函数中不能使用this。Vue 为了避免我们错误的使用,直接将 setup函数中的this修改成了 undefined

2、setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性。

如果需要解构 prop,可以通过使用 setup 函数中的toRefs 来完成此操作:

父传子,props

import { toRefs } from ‘vue’

setup(props) {

const { title } = toRefs(props)

console.log(title.value)

onMounted(() => {

console.log('title: ’ + props.title)

})

}

子传父,事件 - Emitting Events

举例,现在我们想在点击提交按钮时触发一个login的事件。

在 Vue2 中我们会调用到this.$emit然后传入事件名和参数对象。

login () {

this.$emit(‘login’, {

username: this.username,

password: this.password

})

}

在setup()中的第二个参数content对象中就有emit,这个是和this.$emit是一样的。那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

然后我们在login方法中编写登陆事件

另外:context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构

setup (props, { attrs, slots, emit }) {

// …

const login = () => {

emit(‘login’, {

username: state.username,

password: state.password

})

}

// …

}

3、 setup()内使用响应式数据时,需要通过.value获取

import { ref } from ‘vue’

const count = ref(0)

console.log(count.value) // 0

4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 .value

5、setup函数只能是同步的不能是异步的

7. vue3 Teleport瞬移组件

Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件",

他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的

以一个例子来看:编写一个弹窗组件

this is a modal

<button @click=“buttonClick”>Close

在app.vue中使用的时候跟普通组件调用是一样的

Vue logo

<button @click=“openModal”>Open Modal

<modal :isOpen=“modalIsOpen” @close-modal=“onModalClose”> My Modal !!!

  • 24
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值