The main contents of the VUE upgrade

  • Import {value, computed, watch, onMounted} from ‘vue’
  • Diff algorithm has been reworked to increase speed by 6 times
  • Enhance typescript support
  • Open up more low-level functionality
  • Of course, the most important thing is function based

What does it do

Function based mainly replaces mixins. First, compare the calling methods of mixins and function based

mixins

mixins: [mixin]
Copy the code

Mixins obviously we don’t know what methods and data they provide to us, resulting in unclear data sources, and the injection of multiple mixins can also cause naming conflicts

function based

const { x, y } = useMouse()
Copy the code

Function based requires us to get the things we need out of the system first, which is a good solution to these problems. React hooks also solve this problem, and advanced components also cause unclear data sources. React-hooks and Vue function Based. I won’t elaborate here.

Function Based exposes the problem of VUE

If function based is only used as a substitute for mixing, then it is ok. Function Based, however, has emerged to better support typescript.

Let’s take a look at how to write components using Function Based. Of course, I believe 3.0 will retain the component writing method of 2.0.

import { value, computed, watch, onMounted } from 'vue'

const App = {
  template: `
    <div>
      <span>count is {{ count }}</span>
      <span>plusOne is {{ plusOne }}</span>
      <button @click="increment">count++</button>
    </div>
  `,
  setup() {// reactive state const count = value(0) // Computed is no longer in the specified area, Const plusOne = computed(() => count.value + 1) // method increment = () => {count.value++} Watch (() => count. Value * 2, val => {console.log(' count * 2 is')${val}}) // lifecycle onMounted(() => {console.log(' mounted ')}) // 2.0 datareturn {
      count,
      plusOne,
      increment
    }
  }
}
Copy the code

React methods do not have a specified area, so you can call them.

Because a typescript component is written differently once, will something come along that will make vue written differently again? Why don’t I worry too much about react, so let’s write react first

/ / functionfunctionFriendListItem(props) {// const isOnline = useFriendStatus(props.friend.id); //returnGo out to the value of thereturn (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
Copy the code

Is it more like native JS? All libraries, frameworks and so on are going to be compatible with native JS, that’s for sure. If native JS is not compatible then it’s not called a JS library or framework. React is easier to use and more compatible with libraries, as we’ve seen with typescript. React has been left to its own devices. Vue has been overhauled.

This is also why I have to worry about whether VUE will encounter big changes due to external reasons next time

Function Based versus React hooks

Functionally, everyone has done logic reuse to replace mixins and higher-order components. It also solved some of the original problems.

The second function Based feature of Vue is to be compatible with typescript

Remember that react-hooks are trying to emulate the life cycle. They are trying to switch from class to pure functions. Everyone should know that pure functions perform better than class.

conclusion

Vue is a good performance boost, but it also adds more low-level apis, which will help. Vue also has to give some thought to typescript changes. I don’t care about the fact that VUE is only compatible with IE11, and I’m not a conservative. First of all, most people have IE11 on their computers. As for IE8, it’s all on older systems like XP. For individual departments that need IE8, we usually use JQ and Webpack to do multi-page applications. Vue2. X would not have you. So it doesn’t really make much difference to the business

Of course, vue’s diff updates will obviously improve performance. React will probably apply vue’s diff ideas to its own diff in the future. Some people in the community always say that VUE copies everyone, but I don’t agree with that. Up-and-comers should refer to the ideas of the old-timers, of course, and apply and transform, others themselves behind closed doors, think terrible. Of course vue has a new idea, react will definitely look at it. Everyone’s goal is to make the community more prosperous.

At the same time, I don’t like people telling me that Internet Explorer is bad