{
  data() {
    return {
      a: 10
    }
  },
  methods: {
    fn1() {
      const a = this.a;
    }
  },
  mounted() {
    this.fn1();
  }
}

function useFeatureX() {
  const state = reactive({
    x: 1,
    y: 2
  })
  //...
  //返回时转换为 ref
  return toRefs(state)
},
	
export default {
	
	setup() {
	    // 可以在不丢失响应式的情况下破坏解构
	    const {x, y} = useFeatureX()；
	    return {
	        x,
	        y
	    }
	}
}

import {ref, reactive} from 'vue'
export default {
  setup() {
    const nameRef = ref('pyy');
    const ageRef = ref(20);
  }
}

export default {
  setup() {
    const state = reactive({
      name: 'pyy',
      age: 20
    })
  }
}

// 错误
function computed(getter) {
  let value  = 100;
  setTimeout(() => {
    value = getter()
  },1000);
  return value;
}

// 测试
let a = 2;
a = computed(() => 100)

// 此时 a 依然等于2，并没有改变成 100。返回的value 是值类型，与a无关。

// 以上情况可以比喻为下例
let aa = 100;
let bb = aa;
aa = 200;
bb // 100

// 正确
function computed(getter) {
  let ref = {
    value: null
  };
  setTimeout(() => {
   ref.value = getter()
  },1000);
  return ref;
}

// 测试
let a = {};
a = computed(() => 100)

// 此时 a 为对象 {value: 100}，

// 以上情况可以比喻为下例
let obj1 = {x: 100},
let obj2 = obj1;
obj1.x = 200;
obj2  // 200

// vue2.x
const app = new Vue({/*...*/})

// vue3
const app = Vue.createApp({/*...*/})

// vue2.x
Vue.use(/*...*/)
Vue.mixin(/*...*/)
Vue.component(/*...*/)
Vue.directive(/*...*/)

// vue3
app.use(/*...*/)
app.mixin(/*...*/)
app.component(/*...*/)
app.directive(/*...*/)

<HelloWorld :msg="msg" @onSayHello="sayHello"></HelloWorld>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  emits: ['onSayHello'],
  setup(props, {emit}) {
    emit('onSayHello', 'bbb')
  }
}

<!-- 在methods 里定义 one two 两个函数 -->
<button @click="one($event), two($event)">Submit</button>

<!--  vue2.x 组件模板 -->
<template>
  <div class="blog-post">
    <h3></h3>
    <div v-html="content"></div>
  </div>
</template>

<!--  vue3 组件模板 -->
<template>
    <h3></h3>
    <div v-html="content"></div>
</template>

<!-- vue2 -->
<MyComponent v-bind:title.sync="title" />

<!-- vue3 -->
<MyComponent v-model:title="title" />

// vue2
new Vue({
  //...
  components: {
    'my-component': () => import('./my-async-component.vue')
  }
})

// vue3
import {createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsComponent(() => import('./my-async-component.vue'))
  }
})

<!-- 在双花括号中 -->


<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | formatId"></div>

<!-- data 中设置 modalOpen:false -->
<button @click="modalOpen = true"></button>

<teleport to="body">
  <div v-if="modalOpen" class="modal">
    <div>
      <button @click="modalOpen = false">close</button>
    </div>
  </div>
</teleport>

<Suspense>
  <template>
    <Test1/>  <!-- 这是一个异步组件 -->
  </template>
  
  <template #fallback>
    Loading...
  </template>
</Suspense>

import { ref, onMounted, onUnmounted } from 'vue'

function useMousePosition() {
  const x = ref(0);
  const y = ref(0);
  function update(e) {
    x.value = e.pageX;
    y.value = e.pageY;
  }
  onMounted(() => {
    window.addEventListenner('mousemove', update)
  });
  onUnMounted(() => {
    window.removeEventListenner('mousemove', update)
  });
  
  return {
    x,
    y
  }
}
export default useMousePosition

import { ref, onMounted, onUnmounted } from 'vue'

function useMousePosition2() {
  const state = reactive({
    x: 0,
    y: 0
  })
  function update(e) {
    state.x = e.pageX;
    state.y = e.pageY;
  }
  onMounted(() => {
    window.addEventListenner('mousemove', update)
  });
  onUnMounted(() => {
    window.removeEventListenner('mousemove', update)
  });
  
  return state
}
export default useMousePosition2

// 触发更新视图
function updateView() {
    console.log('视图更新')
}

// 重新定义属性，监听起来
function defineReactive(target, key, value) {

    // 核心 API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {

                // 设置新值
                // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
                value = newValue

                // 触发更新视图
                updateView()
            }
        }
    })
}

// 监听对象属性
function observer(target) {
    if (typeof target !== 'object' || target === null) {
        // 不是对象或数组
        return target
    }

    // 重新定义各个属性（for in 也可以遍历数组）
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// 准备数据
const data = {
    name: 'zhangsan',
    age: 20,
}

// 监听数据
observer(data)

// 测试
data.name = 'lisi'
data.age = 21
console.log('age', data.age)

// 触发更新视图
function updateView() {
    console.log('视图更新')
}

// 重新定义属性，监听起来
function defineReactive(target, key, value) {
    // 深度监听
    observer(value)
    // 核心 API
    Object.defineProperty(target, key, {
        get() {
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                // 深度监听
                observer(newValue)
                // 设置新值
                // 注意，value 一直在闭包中，此处设置完之后，再 get 时也是会获取最新的值
                value = newValue

                // 触发更新视图
                updateView()
            }
        }
    })
}

// 监听对象属性
function observer(target) {
    if (typeof target !== 'object' || target === null) {
        // 不是对象或数组
        return target
    }

    // 重新定义各个属性（for in 也可以遍历数组）
    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

// 准备数据
const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        address: '北京' // 需要深度监听
    },
}

// 监听数据
observer(data)

// 测试
data.info.address = '上海' // 深度监听
data.age = {num: 22}  // set 的时候也需要深度监听 newVal
data.age.num = 24

// data.x = '100' // 新增属性，监听不到 —— 所以有 Vue.set
// delete data.name // 删除属性，监听不到 —— 所有已 Vue.delete

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})


// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

watchEffect(() => {
    console.log('state.name', state.name);
    console.log('state.age', state.age);
})

<template>

</template>

<script>
export default {
  name: 'GetInstance',
  data() {
    return {
      x: 1,
      y: 2
    }
  },

  setup() {
    console.log('this1', this);  // undefined
    onMounted(() => {
      console.log('this in onMounted', this);  // undefined
      console.log('x', instance.data.x)  // 这里可以取出x的值
    });
    
    const instance = getCurrentInstance();
    console.log('instance', instance);  // 可以打印出组件
    console.log('x', instance.data.x)  // undefined
  },
  mounted() {
    console.log('this2', this);  // this 可以取出
    console.log('y', this.y);  // y 可以取出
  }
}
</script>

<script type="module">
  import add from './src/add.js'
  const res = add(1,2);
  console.log('add res',res)
</script>