VUE3.0从安装到应用 (3)

生命周期

vue2.x
router全局引入在文章2里面有

import home from './home .vue'
export default {
  ...applying,
  name: "applying",
  data() {
    return {
		ifShow:true
    }
  },
  mounted() {},
  created(){

  },
  methods:{},
}

vue3
vue文件

<div>首页</div>
<script>
  import home from "./home.ts";
  export default {
    setup() {
	  let {showV,helloEvent} = home();
      return {
        showV,helloEvent
      }
	}
  }
</script>

ts文件

import { onMounted, ref, nextTick } from "vue"
export default function home() {
    const lArr = ref([]);
    const inputValue = ref();
    const showV = ref(true);
    const video = ref(null);
    onMounted(async () => {

    });
    const helloEvent = () => {
		alert(1)
    };
    return {
        showV,
        helloEvent,
    }
}

vue2里

引入vue然后进行声明，在data()里命名变量，method,mounted,created写方法.

vue3里按需引入 onMounted就和mounted一个作用，
在这个方法里面命令变量，写方法，然后 return输出，
在vue文件里引入ts，在setup()方法里引入刚才写的方法。
在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用。

之前vue模板所有标签都得放到一个标签下，vue3中template模板可以放多个标签。

我这样写是为了区分页面和js，也可以直接在页面写！