Vue ref，reactive 响应式引用

最新推荐文章于 2024-09-04 09:30:30 发布

原创

最新推荐文章于 2024-09-04 09:30:30 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

// ref , reactive 响应式引用
// 原理，通过proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
// ref 处理基础类型的数据
// reactive 处理非基础类型数据如：数组，对象等


<script>
// ref , reactive 响应式引用
// 原理，通过proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
// ref 处理基础类型的数据
// reactive 处理非基础类型数据 如：数组，对象等

方法一：简单使用 ref，监听属性变化

方法二：简单使用 reactive 监听对象变化

// setup 
    // 创建 vue实例
   const app = Vue.createApp({
   
   
    
     // ref 时，使用name如： {
   
   {name}}
    // reactive 时，使用name如： {
   
   {nameObj.name}}
    template:  `
    <div >
        {
    
    {nameObj.name}}
    </div>
   `,

        // created 实例被完全初始化之前
        // 可以直接使用
        setup(props, context) {
   
   
            // 不能在里面用 this关键词
            // 不能调用外部函数
            // 方法一： 使用 ref
            /*
            const {ref} = Vue;
            // proxy， ‘dell’ 变成 proxy（{value: 'lee'}）这样的一个响应式引用
                let name = ref('dell');
                setTimeout(() => {
                    name.valu