实用的VUE系列——快速使用 vue ，就要鄙视他，理解他，成为他

const obj = reactive({});
requst().then((res) => {
  obj = res;
});

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">
    {{ count }} // 不需要调用.value
  </button>
</template>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  props: {
    title: String,
    description: String
  },
  setup(props) {
    // 解构赋值使用props中的数据,必须要用toRefs
    const { title, description } = toRefs(props);
 
    return {
      title,
      description
    };
  }
};
</script>

// 使用Proxy实现完美劫持
const obj = { name: "vue", arr: [1, 2, 3] };
function proxyData(value) {
  const proxy = new Proxy(value, {
    get(target, key) {
      console.log(`get key is ${key}`);
      const val = target[key];
      if (typeof val === "object") {
        return proxyData(val);
      }
      return val;
    },
    set(target, key, value) {
      console.log(`set key is ${key}, value is ${value}`);
      return (target[key] = value);
    },
    deleteProperty(target, key) {
      console.log(`delete key is ${key}`);
    },
  });
  return proxy;
}
const proxy = proxyData(obj);
proxy.age = 18; // 可对新增属性进行劫持
delete proxy.name; // 可对删除属性进行劫持
proxy.arr.push(4); // 可对数组的push等方法进行劫持
proxy.arr[3] = 4; // 可对象数组的索引操作进行劫持

let obj = reactive({});

 obj ={a:1}

 obj = Object.assign(obj,{a:1})

  <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
    // 竟然还要用babel
    <script src="https://unpkg.com/@babel/standalone@7.18.4/babel.min.js"></script>
    <script type="text/babel">
        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    num: 1
                }
            }
            add = () => {
                this.setState({
                    num: this.state.num + 1
                })
            }
            render() {
                return <button onClick={this.add}  >
                    {this.state.num}
                </button>
            }
        }
        window.onload = function () {
            ReactDOM.render(<App />, document.querySelector('#root'))
        }
    </script>

  <div id="app">{{ message }}</div>
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        createApp({
            setup() {
                const message = ref('Hello Vue!')
                return {
                    message
                }
            }
        }).mount('#app')
    </script>

<template>
  <div>假设我们要看到数据并且打印出来，看看模板中的问题{{ log(loginMsg) }}</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const loginMsg = ref('');

const log = (loginMsg) => {
  console.log(loginMsg)
};

export const toDisplayString = (val: unknown): string => {
  // 判断了值类型
  return isString(val)
    ? val
    : val == null
      ? ''
      : isArray(val) ||
          (isObject(val) &&
            (val.toString === objectToString || !isFunction(val.toString)))
        ? // 保证他是一个字符串 第二个参数是为了过滤内容，最终拿到相对应的value的值
          JSON.stringify(val, replacer, 2)
        : String(val)
}

const replacer = (_key: string, val: any): any => {
  if (val && val.__v_isRef) {
    // 这个地方处理了.value
    return replacer(_key, val.value)
  } else if (isMap(val)) {
    return {
      [`Map(${val.size})`]: [...val.entries()].reduce(
        (entries, [key, val], i) => {
          entries[stringifySymbol(key, i) + ' =>'] = val
          return entries
        },
        {} as Record<string, any>,
      ),
    }
  } else if (isSet(val)) {
    return {
      [`Set(${val.size})`]: [...val.values()].map(v => stringifySymbol(v)),
    }
  } else if (isSymbol(val)) {
    return stringifySymbol(val)
  } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
    // native elements
    return String(val)
  }
  return val
}

   // 混入内容
  export const mixins = {
    data() {
      return {
        msg: "这是值",
      };
    },
    computed: {},
    created() {
      console.log("我是mixin中的created生命周期函数");
    },
    mounted() {
      console.log("我是mixin中的mounted生命周期函数");
    },
    methods: {
      clickMe() {
        console.log("我是mixin中的点击事件");
      },
    },
  };
  // 使用混入
  
 // src/App.vue
<template>
<div id="app">
  <img alt="Vue logo" src="./assets/logo.png" />
  <button @click="clickMe">点击我</button>
</div>
</template>

<script>
import { mixins } from "./mixin/index";
export default {
name: "App",
mixins: [mixins],
components: {},
created(){
  console.log("组件调用minxi数据",this.msg);
},
mounted(){
  console.log("我是组件的mounted生命周期函数")
}
};
</script> 

  import { ref, defineComponent, computed } from "vue";

  export default defineComponent({
    setup() {
    //composition api ref
      const count = ref(0);
  
      const color = ref("red");
      const changeColor = () =>
        (color.value = color.value === "red" ? "green" : "red");
  
      return () => (
        <div>
          <div style={{ color: color.value }}>{count.value}</div>
          <button onClick={changeColor}>改变颜色</button>
        </div>
      );
    },
  });

// 封装axios 请求实现逻辑复用
// 每次请求
import { ref } from "vue";
import axios from "axios";

export default function useFetch(url) {
  const data = ref(null);
  const error = ref(null);
  const isLoading = ref(true);

  axios.get(url)
    .then(response => {
      data.value = response.data;
    })
    .catch(errorResponse => {
      error.value = 'Error: ' + errorResponse.response.status + ' - ' + errorResponse.response.statusText;
    })
    .finally(() => {
      isLoading.value = false;
    });

  return {
    data,
    error,
    isLoading
    
    
  };
}

<template>
  <div >
    <div @click="b">{{ a }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref, onUpdated, nextTick } from "vue";
let a = ref(1);
nextTick(() => {
  console.log(444444444);
});
onUpdated(() => {
  console.log(22222222);
});
nextTick(() => {
  console.log(333333333);
});
const b = () => {
  a.value++;
  nextTick(() => {
    console.log(1111);
  });
};
</script>

// 444444444
// 333333333
// 点击之后
// 22222222
// 1111