vue3.0常用的！！！

lyyyyyyyyy
121 阅读3分钟

存储对象

window.localStorage.setItem("","")

取出对象

window.localStorage.getItem("")

  • json.stringify() 将对象、数组转换成字符串；
  • json.parse() 将字符串转成json对象。

将数据通过JSON.stringify处理后赋给某一个声明的变量

function goDetail(item) {
  let obj = JSON.stringify(item)
  router.push({
    path: '/detail',
    query: { item: obj },
  })
}

var data='{"name":"goatling"}' //解析对象
JSON.parse(data)
//结果：name:"goatling"

JSON.stringify()//从一个对象中解析出字符串
var data={name:'goatling'} 
JSON.stringify(data) 
//结果： '{"name":"goatling"}'

生命周期：

image.png

vue3的生命周期

挂载阶段
  • beforeCreate（创建前）
  • created（创建后）
  • beforeMount(挂载前)
  • mounted（挂载后）
更新阶段
  • beforeUpdate（更新前）
  • updated（更新后）
卸载阶段
  • beforeUnmount(vue2.0是beforeDestroy)（销毁前）
  • unmounted(vue2.0是destroyed)（销毁后）

创建前（beforeCreate）

对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

创建后（created）

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

挂载前（beforeMount）

对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

挂载后（mounted）

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

更新前（beforeUpdate）

对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

更新后（updated）

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

销毁前（beforeDestroy）

对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

销毁后（destroyed）

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可以准确地控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。

setup语法糖（setup函数在组件创建之前执行，并且充当Componsition API）的入口。

使用setup函数注意：

  • setup函数中没有this, 因为setup函数在beforeCreated之前就执行了
  • setup其本身不可以为异步函数
  • setup内可以执行await方法处理异步问题
  • setup函数接收两个参数，props和context（context包含3个参数attrs,slots,emit）,而context是可以被解构的
<script setup="props, context" lang="ts">
    console.log(context.attrs)
    console.log(context.slots)
    console.log(context.emit)
</script>
 
<script setup="props, { attrs, slots, emit }" lang="ts">
    console.log(attrs)
    console.log(slots)
    console.log(emit)
</script>

Componsition API，reactive、ref、toRefs将setup中声明的变量转变成Vue可以监听的对象

<script>
import { defineComponent, ref, toRefs, reactive} from 'vue'
export default defineComponent({
    setup(){
        // ref声明响应式数据，用于声明非引用类型
        const active = ref(0)
        // 修改
        active.value = 1
 
        // reactive声明响应式数据，用于声明引用数据类型
        const state = reactive({
            name: 'lyyyy',
            sex: '女'
        })
        // 修改
        state.name = 'Cc'
  
        // 使用toRefs解构
        const {name, sex} = toRefs(state)
        
        return {
            active,
            state
        }
    }
})
</script>

语法糖的形式：

<script setup>
 import { reactive, ref, toRefs } from 'vue'
 
 // ref声明响应式数据，用于声明非引用类型
 const active = ref(0)
 // 修改
 active.value = 1
 
 // reactive声明响应式数据，用于声明引用数据类型
 const state = reactive({
   name: 'lyyyy',
   sex: '女'
 })
 // 修改
 state.name = 'Cc'
  
 // 使用toRefs解构
 const {name, sex} = toRefs(state)
 
</script>

methods方法创建的变化 直接在setup函数中声明一个函数表达式即可

<template>
    <div>{{`${person.name}今年${person.age}岁`}}</div>
    <button @click="changeAge">加1岁</button>
</template>
 
<script setup>
import { reactive } from 'vue'
const person = reactive({
    name: 'lyyyy',
    age: 18
})
 
// 声明methods方法
const changeAge = () => {
    person.age += 1
}
</script>

computed。Vue3.0中引入computed API创建

<template>
    <div>{{`${person.name}今年${person.age}岁, 明年${nextYearAge}岁`}}</div>
</template>
 
<script setup>
import { computed, reactive } from 'vue'
const person = reactive({
    name: 'lyyyy',
    age: 18
})
 
// 声明methods方法
const nextYearAge = computed(() => {
    return person.age + 1
})
</script>

watch函数的使用 watch函数在Vue3.0中包含三个参数watch(pointer, change, options)

  • pointer: 指针函数，告诉watch的是哪个对象

  • change: 被watch对象的值或者属性的变化

  • options: 给watch函数设置的属性，如deep, immediate等

<template>
    <div>{{`${person.name}今年${person.age}岁, 明年${nextYearAge}岁`}}</div>
    <button @click="changeAge">加1岁</button>
</template>
 
<script setup>
import { computed, reactive, watch } from 'vue'
const person = reactive({
    name: 'lyyyy',
    age: 18
})
 
// 声明methods
const changeAge = () => {
    person.age += 1
}
 
// 声明methods方法
const nextYearAge = computed(() => {
    return person.age + 1
})
 
watch(
    // pointer函数，监听的是什么
    () => person.age,
    // change函数，监听值的变化
    (newV, oldV) => {
        console.log("当前值：" + person.age)
        console.log("变化前：" + oldV)
        console.log("变化后：" + newV)
    },
    {
      immediate: true, // 立即执行
      deep: true // 深度监听
    }
)
</script>

props传值，父传子（defineProps）

// 父组件
<template>
  <div>
    <child :name="name"></child>
  </div>
</template>
 
<script setup>
// 引入组件，组件在setup语法糖中会自动注册
import Child from './child.vue'
</script>
 

 
// 子组件
<template>
  <div>
    子组件中name=`${name}`
  </div>
</template>
 
<script setup>
// 引入组件，组件在setup语法糖中会自动注册
// import { defineProps } from 'vue'
// defineProps在<script setup>中自动可用，无需导入
// 需在.eslintrc.js文件中【globals】下配置【defineProps: true】
 
// 声明props
const props = defineProps({
  name: {
    type: String,
    default: ''
  }
})  
 
</script>

emit的使用（父传子），defineEmits([ emitFuncName ])

// 父组件
<template>
    <div>{{`${person.name}今年${person.age}岁`}}</div>
    <HelloWorld :person="person"></HelloWorld>
</template>
 
<script setup>
import HelloWorld from '../components/HelloWorld.vue'
import { reactive } from 'vue'
const person = reactive({
    name: 'lyyyy',
    age: 18
})
</script>
 
//
//
//
//
 
// 子组件
<template>
    <button @click="changePersonName">改名字</button>
</template>
 
<script setup>
// import { defineProps, defineEmits } from 'vue' // setup语法糖中可以不用import
// props声明
const props = defineProps({
  person: {
    type: Object,
    default() {
      return {}
    }
  }
})
 
// 声明事件
const emit = defineEmits(['update:person'])
 
const changePersonName = () => {
  props.person.name = "小刘"
  // 执行
  emit('update:person', props.person)
}
</script>
avatar
文章
阅读
粉丝